2025年10月にNext.jsをcreate-next-appして静的HTMLをbuild

Next.jsは1年前に取り組んだのが最後で、それからずっとReactやってたのでもう一度やり直し。1年も経てばNext.jsのことだからゼロから始めた方が良いと思います。

参考にしたのは公式サイト

https://nextjs.org/docs/app/getting-started/installation

create-next-app

npm ではなく、 pnpm が推奨らしい。pnpm = performant npm（高性能な npm）ということ。

npm install -g pnpm

で、

pnpm create next-app@latest foo

質問はこんな感じ。

? Which linter would you like to use? ? ESLint
? Would you like to use Tailwind CSS? … No (Tailwind使わないので)
? Would you like your code inside a `src/` directory? … Yes
? Would you like to use App Router? (recommended) … Yes
? Would you like to use Turbopack? (recommended) … Yes
? Would you like to customize the import alias (`@/*` by default)? … No

こんな Warning が出た。

Ignored build scripts: sharp, unrs-resolver.                                            
Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. 

pnpm approve-builds ってやったらこの2つをインストールした。

pnpm dev コマンドで http://localhost:3000/ にアクセスするとDevサイトが表示されている。

buildを試してみる。

とりあえず、コードには触らずにbuildしてStaticファイルが出るかを試す。

pnpm i

してnode_modules以下に依存性ファイル設置（pnpmの場合はシンボリックリンク）

react-hooks が足りない？

pnpm build

すると

 Linting and checking validity of types  .. × ESLint: Failed to load plugin 'react-hooks' declared in ' ≫ eslint-config-next/core-web-vitals ≫ /home/t-ito/projects/foo/src/node_modules/.pnpm/eslint-config-next@15.5.5_eslint@9.37.0_typescript@5.9.3/node_modules/eslint-config-next/index.js': Cannot find module 'eslint-plugin-react-hooks' Require stack: - /home/t-ito/projects/foo/src/__placeholder__.js Referenced from: /home/t-ito/projects/foo/src/node_modules/.pnpm/eslint-config-next@15.5.5_eslint@9.37.0_typescript@5.9.3/node_modules/eslint-config-next/index.js

というエラーが出た。エラーの通りに pnpm i react-hooks してから再度buildしたら通った。

静的ファイルが無い

普通に静的ファイルが無い。 /.next/server/ にあるのはSSR用のファイルだと分かる。

で、pnpm next export したら

 ×
    `next export` has been removed in favor of 'output: export' in next.config.js.
Learn more: https://nextjs.org/docs/app/building-your-application/deploying/static-exports

と言われてしまった。

で、当該のURLを読んで、

const nextConfig: NextConfig = {
  /* config options here */
  output: "export",
  distDir: 'dist',
};

としてから、pnpm build したら、dist というフォルダができているのでこれが静的HTML
distDir: 'dist', を指定しない場合は out になる。