INDEX
はじめに
ローカル環境でNext.jsを起動する手順を学習しました！
その記録をまとめました。
下記の画像が表示されるまでを解説します。
Next.jsのメリット
| メリット | 説明 |
|---|---|
| Reactとの統合 | Next.jsはReactと統合されており、Reactコンポーネントを使用してウェブアプリケーションを構築します。Reactは、ユーザーインターフェースを構築するための強力で人気のあるライブラリです。 |
| サーバーサイドレンダリング (SSR) と静的サイト生成 (SSG) | Next.jsはサーバーサイドレンダリングと静的サイト生成をサポートしています。これにより、ページを事前にサーバーでレンダリングしておくことができ、初回の読み込みが高速になります。 |
| ルーティングの簡素化 | Next.jsはファイルベースのルーティングを提供しており、pagesフォルダ内にファイルを配置することで、自動的にURLとの対応が行われます。例えば、pages/about.tsは/aboutのURLにマッピングされます。 |
| 自動的なコード分割 | ページごとに必要なJavaScriptコードが分割され、ページごとに必要な分だけをユーザーに送信することができます。これにより、初回読み込みを高速化し、パフォーマンスを向上させます。 |
| ホットリローディング | 開発中に行われる変更を即座に反映するホットリローディングがサポートされています。これにより、アプリケーションの開発が効率的に行えます。 |
| APIルート | pages/api フォルダにAPIエンドポイントを作成することができ、サーバーレス関数として簡単に利用できます。 |
| デプロイの容易性 | VercelやNetlifyなどのプラットフォームで簡単にデプロイできます。また、静的ファイルを生成することで、CDNを使用して高速かつ安定したホスティングが可能です。 |
手順
STEP
プロジェクト作成
下記コマンドでプロジェクト作成する事が出来ます。
※ 意味：frontendという名前のプロジェクトをTypeScript(–ts)で最新(@latest)で作成する
※ 実行するといくつかの質問が表示されます備考の内容を確認してください。
npx create-next-app@latest --ts frontendSTEP
Next.jsの起動
起動コマンド
npm run dev出力結果を確認します。
$ npm run dev
> frontend@0.1.0 dev
> next dev
▲ Next.js 14.0.4
- Local: http://localhost:3000
✓ Ready in 9.6s備考
質問1: ESLintを使用しますか？
Yesと回答しましょう
√ Would you like to use ESLint? ... No / Yes
（ESLintを使用しますか？... いいえ / はい）- ESLintとは？
ESLintは、JavaScriptコードの潜在的な問題やスタイルの違反を見つけ、修正するためのツールです。コードの品質を向上させ、共通のコーディングスタイルを確立するのに役立ちます。ESLintはカスタマイズ可能であり、異なるプロジェクトに合わせてルールを設定できます。
質問2: Tailwind CSSを使用しますか？
Yesと回答しましょう
√ Would you like to use Tailwind CSS? ... No / Yes
（Tailwind CSSを使用しますか？... いいえ / はい）- Tailwind CSSとは？
CSSを効果的かつ迅速に構築するためのユーティリティファーストのCSSフレームワークです。
質問3: src/ ディレクトリを使用しますか？
Yesと回答しましょう
√ Would you like to use `src/` directory? ... No / Yes
（src/ ディレクトリを使用しますか？... いいえ / はい）質問4: App Routerを使用しますか？（推奨）
Yesと回答しましょう
√ Would you like to use App Router? (recommended) ... No / Yes
（App Routerを使用しますか？（推奨）... いいえ / はい）- App Routerとは？
ウェブアプリケーション内でのページの遷移やルーティングを簡単かつ効果的に処理するための機能です
| メリット | 説明 |
|---|---|
| 自動的なルーティング | App Routerは、pagesディレクトリ内のファイル構造に基づいて自動的にルーティングを構築します。たとえば、pages/about.tsというファイルがあれば、それに対応するURLは/aboutになります。 |
| 動的ルーティング | ファイル名に[…]でくくられた部分を含むファイルを作成することで、動的なルーティングを実現できます。たとえば、pages/posts/[slug].tsというファイルを作成すると、/posts/any-slugのようなURLに対応することができます。 |
| Linkコンポーネント | next/linkモジュールを使用した Linkコンポーネントは、アプリケーション内でのクライアントサイドのナビゲーションを可能にします。通常の <a>タグとは異なり、ページ遷移がクライアントサイドで処理され、ページの再読み込みが発生しません。 |
質問5: デフォルトのインポートエイリアス（@/）をカスタマイズしますか？
Yesと回答しましょう
√ Would you like to customize the default import alias (@/*)? ... No / Yes
（デフォルトのインポートエイリアス（@/）をカスタマイズしますか？... いいえ / はい）- import aliasとは？
プロジェクト内のファイルパスを簡略化する
質問6: 設定するインポートエイリアスは何ですか？
Yesと回答しましょう
√ What import alias would you like configured? ... @/*
（設定するインポートエイリアスは何ですか？... @/*）下記はイメージコード
import Header from '@/components/Header';Next.jsのファイル構成(初期値)
.
├── node_modules # このディレクトリには、プロジェクトで使用されているパッケージやライブラリが格納されています。通常、開発者は手動でこのディレクトリを管理する必要はありません。
├── public # このディレクトリには、静的なファイル（画像、アイコンなど）が格納されています。
│ ├── next.svg
│ └── vercel.svg
├── src # このディレクトリには、アプリケーションのソースコードが格納されています。
│ └── app
│ ├── favicon.ico # ウェブサイトのタブやブックマークなどに表示されるアイコンです。
│ ├── globals.css # アプリケーション全体で使用されるグローバルなスタイルが定義されています。
│ ├── layout.tsx # アプリケーションの全体的なレイアウトに関するコードがここに配置されます。
│ └── page.tsx # アプリケーションのメインとなるページのコードがここに配置されます。
├── .eslintrc.json # ESLintの設定ファイル。コードの品質やスタイルを検証するためのツールです。
├── .gitignore # Gitが無視するべきファイルやディレクトリが定義されています。
├── next-env.d.ts # Next.jsの型定義ファイル。TypeScriptを使用している場合、これは自動生成されるファイルです。
├── next.config.js # Next.jsの設定ファイル。ビルドや開発時の動作など、プロジェクト全体の設定が記述されています。
├── package-lock.json # npmパッケージの依存関係の正確なバージョン情報が含まれています。
├── package.json # プロジェクトの設定、依存関係、スクリプトなどが記述されたnpmパッケージの設定ファイル。
├── postcss.config.js # PostCSSの設定ファイル。CSSを変換するためのツールです。
├── README.md # プロジェクトの説明や使用法に関するドキュメントが格納されたMarkdownファイル。
├── tailwind.config.ts # Tailwind CSSの設定ファイル。Tailwind CSSは、CSSフレームワークであり、クラスベースのスタイルを提供します。
└── tsconfig.json # TypeScriptの設定ファイル。TypeScriptコンパイラの動作やプロジェクトの型定義などが定義されています。| ファイル名 | 役割 |
|---|---|
| node_modules | プロジェクトで使用されているパッケージやライブラリが格納されています。通常、開発者は手動でこのディレクトリを管理する必要はありません。 |
| public | 静的なファイル（画像、アイコンなど）が格納されています。 |
| src | アプリケーションのソースコードが格納されています。 |
| .eslintrc.json | ESLintの設定ファイル。コードの品質やスタイルを検証するためのツールです。 |
| .gitignore | Gitが無視するべきファイルやディレクトリが定義されています。 |
| next-env.d.ts | Next.jsの型定義ファイル。TypeScriptを使用している場合、これは自動生成されるファイルです。 |
| next.config.js | Next.jsの設定ファイル。ビルドや開発時の動作など、プロジェクト全体の設定が記述されています。 |
| package-lock.json | npmパッケージの依存関係の正確なバージョン情報が含まれています。 |
| package.json | プロジェクトの設定、依存関係、スクリプトなどが記述されたnpmパッケージの設定ファイル。 |
| postcss.config.js | PostCSSの設定ファイル。CSSを変換するためのツールです。 |
| README.md | プロジェクトの説明や使用法に関するドキュメントが格納されたMarkdownファイル。 |
| tailwind.config.ts | Tailwind CSSの設定ファイル。<br>Tailwind CSSは、CSSフレームワークであり、クラスベースのスタイルを提供します。 |
| tsconfig.json | TypeScriptの設定ファイル。<br>TypeScriptコンパイラの動作やプロジェクトの型定義などが定義されています。 |
