Next.jsのチュートリアルのプロジェクト作成で詰みかけたので、解決に至る方法を共有します

初めまして、お久しぶりです。ソラノアナです。

お仕事でNext.jsを使うことになり、Next.jsのチュートリアルをやってみました。しかし上手くいかず、チュートリアルに記載があるような画面にはなりませんでした。それを解決するのに半日以上かかってしまったので、備忘録と情報共有を兼ねて本ページを作りました。

おことわり

Next.js初心者が手探りでいろいろ試した結果についての内容なので、あくまで「とりあえずこうしたら動いた」程度の内容です。
間違った内容が混ざっていたり、余計なことをしていたりする可能性はあります。その際はコメントで優しく教えていただければと思います。
また本ページでは、同じ初学者が、チュートリアルの始まり部分で詰んでドロップアウトするというのを少しでも減らすことを目的に記載しています。

事象の背景・症状

まず、Next.jsのチュートリアルに記載のある以下のコマンドを叩いても動かず。

CMD

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

以下の記載を参考に、リンク先にあるコマンドを叩いても動かず。

If it doesn’t work, please take a look at this page.（うまくいかない場合は、こちらのページをご覧ください。）

CMD

npx create-next-app nextjs-blog

自分で試行錯誤して、以下のコマンドを叩いたところ、一応プロジェクトが作られる。

CMD

npx create-next-app nextjs-blog --use-npm

しかし、後にチュートリアルで記載されている内容と全く違う画面となっている。

↓作られたプロジェクトの実行画面

↓後にチュートリアルで提示される実行画面

環境

Windows11 pro 22H2
npm: 8.3.1

解決策

まず、以下のコマンドを叩いてデフォルトのプロジェクトを作成する.

CMD

npx create-next-app nextjs-blog

途中いろいろ聞かれるが、以下の通り答える

CMD

√ Would you like to use TypeScript with this project? … No
√ Would you like to use ESLint with this project? … Yes
√ Would you like to use Tailwind CSS with this project? … Yes
√ Would you like to use 'src/' directory with this project? … Yes
√ Would you like to use experimental 'app/' directory with this project? … No
√ What import alias would you configured? … @/*

次に、チュートリアルで扱っているプロジェクトをここのページからzipでダウンロードしてくる。

コマンドを叩いて作成したnextjs-blogプロジェクトの package.json の"next"の値を"latest"に変更する。

package.json

{
  "name": "nextjs-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
-    "next": "13.3.0",
+    "next": "latest",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.1"
  }
}

次に、作成したプロジェクトのnextjs-blog\src\pages以下を全て削除する。

上のディレクトリに、ダウンロードしたファイルのnextjs-learn-master\basics\learn-starter\pages以下の中身をコピペする。

次に、作成したプロジェクトのnextjs-blog\src\styles以下を全て削除する。

最後に、上のディレクトリに、ダウンロードしたファイルのnextjs-learn-master\basics\learn-starter\styles以下の中身をコピペする。

終わり

僕の環境では、この手順でチュートリアルにある画面を出すことができました。また、windows10の別端末でもできたため、たぶんほかの環境で動くのではないかと思います。
やはり公式ドキュメントの類はクソ！

見ていただきありがとございました。