BIMモデルを利用したLPを作ってみる① Next.js + Storybook + Cloudflare編

プロジェクト作成

next バージョン 13.4.2 storybook バージョン 7.0.11

npx create-next-app@latest --ts
npm i sb@latest type nextjs
npm sb init

Storybookのサンプル内のエラー修正

eslintで警告されたエスケープ処理を修正

"args" of child component stories

最近のNext.jsではデフォルトでサーバーサイドレンダリングの設定なので, クライアントレンダリングの設定を明記

"use client"

---

Cloudflareでデプロイする際の設定

Cloudflareに環境変数を追加

NODE_VERSION  18.7.0(12.22.0以上であれば良いとのことだが今回は開発環境に合わせた)

next.config.js修正

App Routerではnext exportは使えないのでoutput:'export'を指定

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig