Skip to main content

1.Next.js の作成と初期化

必須項目

  • Node 18.x 以上
  • pnpm

新規Next.js 作成​

最初にnpxコマンドからnextjsプロジェクトを初期化します。 npxコマンドはMacにインストールを行わずにnode.jsのサードパーティライブラリを利用できます。 最近は初期化の時に使うコマンドはnpxから使われる場面が増えてきました。 npxから実行すると、最新バージョンが利用できるのでなお良いです。

npx create-next-app nextjs-template

いくつか質問が飛んでくるので、ここではtypescriptを利用します。 聞かれる質問に関しては、こちらの記事が役に立ちます。

https://zenn.dev/ikkik/articles/51d97ff70bd0da

✔ 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 your code inside a `src/` directory? …` No` / Yes
✔ Would you like to use App Router? (recommended) … No /` Yes`
✔ Would you like to use Turbopack for `next dev`? … No /` Yes`
✔ Would you like to customize the import alias (`@/*` by default)?  `No` / Yes
Creating a new Next.js app in /Users/ted/react/nextjs-template.

サーバを起動します。

cd nextjs-template
yarn dev

create-next-appから作成すると、初期化時に最初のコミットが行われています。

この様なコミットメッセージのコミットがあるか確認しておきましょう。

Initial commit from Create Next App