ホームページ - EY-Office

2023-11-29

Next.js、create-next-appのexample（テンプレート）を試してみた

カテゴリー：React

Reactを生み出したFacebookが作ったReactプロジェクト作成ツールcreate-react-appのバージョンアップがほぼ止まった現在、Next.jsのcreate-next-appはReactプロジェクト作成ツールの有力候補です。

以前の私は、どちらかというと Vite 推しでした。しかし、現時点や少し先を考えるとNext.jsを無視できないというか・・・

React公式ページのインストールでNext.js(create-next-app)が推奨されている
React v18.0の目玉機能である React Server Components(RSC) を考えると、サーバー側も含んでいるNext.jsは強い → 参照ブログ

Next.js expample Stable Diffusion(mage.space)が生成した画像です

create-next-appのコマンドの問合せをなくす

ただし、create-next-appには困った面があります。単純にターミナルで create-next-app と入力すると、以下の問合せがあります。

$ create-next-app my-first-app

Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

通常の仕事だとプロジェクトを作る機会は少ないですが、教育では何度も何度もプロジェクトを作ります。しかも受講者はReactの初心者ですから、質問の意味は理解出来ないでしょうし、間違ってしまう人が一定の確率で発生します。

create-next-appドキュメントの Non-interactive を見るとcreate-next-appのオプションが書かれています。
しかし、これが曲者でdefaultのオプションでも指定しないと問合せが発生したりします。

TypeScript、App router/Tailwind CSSは使わない、srcディレクトリー無しのプロジェクト作成は、以下のようになります。

$ create-next-app my-second-app --ts --eslint --no-tailwind --no-src-dir \
  --no-app --import-alias '@/*'

長い❗

さらに、生成されるコードが・・・

さらに、ここで作成されるコードのファイル・ディレクトリーは以下ようになります。

├── .eslintrc.json
├── .git
│   └── ・・・省略・・・
├── .gitignore
├── .next
│   └── ・・・省略・・・
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
│   └──  ・・・省略・・・
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── public
│   ├── favicon.ico
│   ├── next.svg
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

pages/apiは何でしょうか？ _app.tsx、_document.tsxもNext.jsを使い込むには必要ですが、Reactの勉強だけなら要りません。
また、美しいindex.tsxページを表示するためのpublic/の画像やstyles/のCSSも初心者向けには無いほうが嬉しいです。

そこで —exampleオプション

create-next-appには生成されるコードのテンプレートを指定する--exampleオプションがあります。

You can create a new app using the default Next.js template, or by using one of the official Next.js examples.

-e, —example [name]|[github-url]

　An example to bootstrap the app with. You can use an example name 　from the official Next.js repo or a public GitHub URL. The URL can use 　any branch and/or subdirectory

しかも、GitHubのURLを指定できるので、独自のテンプレートを作り使うことができます。

ただし、このexample（テンプレート）の作り方は公式ドキュメントには書かれてないようです（見落としているのかも？）。
しかし、official Next.js examples に多数のexample（テンプレート）があるので、興味のあるのを眺めたり実際に使ったりしてみて、なんとなく判りました。
自分の作りたいプロジェクトのファイル・ディレクトリーを置いておけば良いようです。特別な設定ファイル等はありません（さすがにpackage.jsonファイルは必須です）。

すごく簡単なReactコード作成example

official Next.js examplesに、hello-worldというexample（テンプレート）がありますが、これはApp routerを使っているので、App routerを使わないexampleを作ってみました。https://github.com/yuumi3/next-ex-helloです。

$ create-next-app my-hello-app -e https://github.com/yuumi3/next-ex-hello

上を実行すると以下のような、Hello world! を表示するだけの簡単なReact(Next.js)アプリ・プロジェクトが作成されます。ファイル・ディレクトリーは以下のようになります。

├── .eslintrc.json
├── .git
│   └── ・・・省略・・・
├── .gitignore
├── .next
│   └── ・・・省略・・・
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
│   └──  ・・・省略・・・
├── package-lock.json
├── package.json
├── pages
│   └── index.tsx
└── tsconfig.json

簡単で説明しやすいアプリですね！ 😃

このexample（テンプレート）は以下のように作りました。