Next.jsチュートリアルまとめ【第一章：Getting Started】

はじめに

最近ゆるっとReact/Next.jsとTypeScriptの勉強をしています。

経験者の方々に「どの学習方法がおすすめですか？」と尋ねたところ、皆さん「公式サイトのチュートリアルが一番！」ということで、公式のチュートリアルを進めていくことにします！

Reactとは？

JavaScript言語を用いたWebサイト上のUIを構築するためのライブラリ

Next.jsとは？

Reactベースのフロントエンドフレームワーク

Next.jsの特徴

• サーバーサイドレンダリング（SSR）
サーバーサイドでHTMLを動的に生成してクライアントに送信する技術。パフォーマンスを向上出来る、SEOにも有利
• 静的サイト生成（SSG）
ビルド時に各ページを静的なHTMLファイルとして事前に生成する技術。ページロードの高速化、サーバー負荷の軽減が出来る
• ファイルベースのルーティングシステム
ページコンポーネントをpagesディレクトリに配置するだけで自動的にルートが設定出来る機能。開発の効率性とパフォーマンスを向上出来る
• APIルート
APIのエンドポイントを簡単に作成できる機能。例：/pages/api/user.js - /api/userがエンドポイントとなる
• イメージやフォントの最適化が容易
next/Imageコンポーネントやnext/fontモジュールを使うことで自動的に最適化を行なってくれる。

Creating a new project

$ npx create-next-app@latest {プロジェクト名} {ここからオプション}--use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

👉︎オプションについてはこちら

• npx
Node.jsのパッケージ実行ツール npmレジストリに公開されているパッケージをインストールせずに実行できる
• create-next-app
Next.jsに必要なパッケージの導入や設定が完了した状態の環境が作れるコマンド
• @latest
npmパッケージの最新バージョンをインストールする際に使用されるタグ（他にもnext,beta,alpha等）

※対話形式で一つずつ選択して進めていく方法もある

$ npx create-next-app@latest
What is your project named? …
（プロジェクト名は何にする？）
Would you like to use TypeScript? … No / Yes
（TypeScriptを使用する？）
Would you like to use ESLint? … No / Yes
（ESLintを使用する？）
Would you like to use Tailwind CSS? … No / Yes
（Tailwind CSSを使用する？）
Would you like to use src/ directory? › No / Yes
（srcディレクトリを使用する？）
Would you like to use App Router? (recommended) › No / Yes
（App Routerを使用する？）
Would you like to customize the default import alias (@/*)? › No / Yes
（インポートエイリアスをカスタマイズする？）
What import alias would you like configured? ›
（設定したいインポートエイリアスは何？）
※ここで指定した文字をルートディレクトリとする、デフォルトは「@/」

※yarnを使って作ることもできる

$ yarn create next-app

開発サーバーを起動する

$ npm run dev
- Local: http://localhost:3000

Next.jsチュートリアル：第一章