Next.js13.4以降のインストール【Next.jsのAPPルーターを使おう第一回】

Next.js13.4から正式実装になったApp Routerを使うためのメモ。

第一回はインストール。

詳細は以下の公式で。

Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.

インストール手順
フォルダとファイル構成
ローカル開発環境の起動
まとめ

インストール手順

自動の場合、ターミナルで以下のコマンド入力。


npx create-next-app@latest

ターミナルで以下が出てくるので、1つずつ選択していく。


Ok to proceed? (y)

What is your project named? my-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
What import alias would you like configured? @/*

1つ1つ選択していけば終わり。

プロジェクト名

What is your project named? my-appはプロジェクト名。何もしないとコマンドを使ったフォルダの配下にmy-appとしてフォルダが作られてインストールされる。

任意のフォルダ名にしたい場合は自分で入力する。

プロジェクト名はpackage.jsonのnameにも反映される。

TypeScript

二つ目はTypeScriptを使うかどうか。

近年ではTypeScriptを使うことが増えたからかデフォルトでyesになっている。

任意で選べばよい。

ESLint

三つ目の選択肢はESLintを使うかどうか。

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Next.jsではデフォルトでeslint-config-nextがあるので、公式が調整したルールで構文をチェックできる。

特に理由がなければyesで良い。

Tailwind CSS

四つ目の選択肢はTailwind CSSを使うかどうか。

こちらも近年非常に増えたスタイルシートのフレームワーク。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

特に理由がなければyesで良いが、これは好みもあるので使わないならnoでよい。

srcディレクトリ

五つ目はsrcフォルダを作るかどうか。

元々Next.jsではsrcディレクトリがデフォルトで作られていなかったけど、他のフレームワークや言語だとソースコードはsrcに集約することが多い。

そういうのもあるので、インストール時の選択肢に入ったのかもしれない。

APPルーター

六つ目はAPPルーターを使うかどうか。

以前のNext.jsではpageフォルダ内で自動でルーティングされていたが、それとは別の仕組みを持った機能がAPPルーター。

Next.js13.4で正式にリリースされた。

今後はAPPルーターを使うので今回はyes。以前のpageを使う場合はNOで。

import alias

七つ目はパスのaliasを作成するかどうか。

パスのaliasは以下のような階層を省略して@とかで書くやつ。


 import "@/styles/global.scss";
 import '../styles/globals.scss'

yesを選ぶと、デフォルトで@/*が出てくるが、ここで変更も可能。

後からtsconfig.jsonで書き換えても良い。

フォルダとファイル構成

以下のフォルダとファイルが作られる。


my-app
│
├─ node_modules
├─ public
├─ src
│   └─ app　　
│       ├─ favicon.ico
│       ├─ globals.css
│       ├─ layout.tsx
│       └─ page.tsx
│
├─ .eslintrc
├─ .gitignore
├─ next-env.d.ts
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ README.md
├─ tailwind.config.ts
└─ tsconfig.json

これでインストールは完成。

ローカル開発環境の起動

インストール後にターミナルから以下のコマンドで色々動かせる。


#開発環境の起動
npm run dev

#ビルド
npm run build

#ビルドのローカル起動
npm run start

まとめ

インストールするだけならば簡単。

最初に出てくる選択肢も簡単。

Tailwind CSSや、パスのエイリアスなど、昔は手動でやっていたものが色々自動になっているので楽になった。

次回は開発環境の整備。

SASSを入れたり、Prettierを入れたり、VSCodeの設定をいじったりの予定。