⚡

[Next.js] プロジェクトの始め方-開発モード起動

2024/09/18に公開

Next.js

はじめに

Next.jsの学習の為に、下記書籍を読みました。
下記書籍のプロジェクト作成について情報を整理したかったので、執筆します。

やり方

1. プロジェクト作成

下記コマンドを実行し、プロジェクト作成する

npx create-next-app

実行結果は、下記の通りです

$ npx create-next-app
# プロジェクトの名前は何にしますか？
√ What is your project named? ... next-js
# TypeScriptを使いますか？
√ Would you like to use TypeScript? ... No / Yes
# ESLintを使いますか？
√ Would you like to use ESLint? ... No / Yes
# Tailwind CSSを使いますか？
√ Would you like to use Tailwind CSS? ... No / Yes
# src/を使いますか？
√ Would you like to use `src/` directory? ... No / Yes
# App Routerを使いますか？(推奨)
√ Would you like to use App Router? (recommended) ... No / Yes
# デフォルトのimpotr alias をカスタマイズしますか？
√ Would you like to customize the default import alias (@/*)? ... No / Yes

What is your project named? … next-js - プロジェクトの名前は何にしますか？

A. 例えば、next-jsというプロジェクトを作成したら、下記のようなディレクトリー構成になります。

next-js
├── .next
├── node_modules
├── public
├── src
│   └── app
└── next-env.d.ts

Would you like to use TypeScript? … No / Yes - TypeScript を使いますか？

TypeScript は、静的解析によってコードバグを防ぐ役割を果たすため、Yesと回答します。

Would you like to use ESLint? … No / Yes - ESLint を使いますか？

ESLint は、コードに規約を設ける役割があります。
例えば

コード品質を保つ：<img>要素に alt 属性を設定し忘れるなど、セマンティクス観点で望ましくないコードを検知します。
潜在的なバグの混入を防ぐ：ライブラリ API を使用している箇所で非推奨な書き方をしているコードを検知します。
開発者同士のレビュー指摘を減らす：import 文の並びなど、コーディングガイドラインにまつわる細かい指摘が不要になる

Would you like to use Tailwind CSS? … No / Yes - Tailwind CSS を使いますか？

Tailwind CSS は、CSS のフレームワークです。目的のプロジェクトに併せて回答してください。

Would you like to use src/ directory? … No / Yes - src/を使いますか？

Yesと回答すると、下記のディレクトリー構成のようにsrcというディレクトリーが生成されます。

next-js
├── src
│   └── app
└── next-env.d.ts

Would you like to use App Router? (recommended) … No / Yes - App Router を使いますか？(推奨)

ルーティング機能について古い機能を使うか？新しい機能(App Router)を使うのか？を訪ねています。推奨事項なのでYesと回答します

Would you like to customize the default import alias (@/*)? … No / Yes - デフォルトの impotr alias をカスタマイズしますか？

こだわりがない場合は、Noと回答します。
ちなみに下記のような import 文をパスを省略する事が出来ます。

// before
import { Button } from '../../../components/button';

// after
import { Button } from '@/components/button';

2. プロジェクト起動(開発モード)

下記コマンドを実行し、プロジェクトを起動する

cd next-js/
npm run dev