2025年人気No.1のNext.jsで、最新ツールとウェブを作る！ | エピソード1 紹介と環境設定

目標

• Next.jsとは何か、2025年にウェブサイト構築に適している理由を理解する。
• 開発環境を準備し、最初のNext.jsプロジェクトを作成する。
• 基本的なアプリケーションを実行し、ディレクトリ構造に慣れる。

---

1. Next.jsとは？なぜ2025年にNext.jsを選ぶのか？

Next.jsは、Reactを基盤としたフレームワークで、Vercelによって開発されています。高速で最適化された、スケーラブルなウェブアプリケーションを構築するのに役立ちます。React単体（UIライブラリのみ）とは異なり、Next.jsには以下のような組み込み機能があります：

• サーバーサイドレンダリング（SSR）: サーバーからコンテンツを読み込み、SEOに有利。
• 静的サイト生成（SSG）: ビルド時に静的ページを生成し、非常に高速。
• ファイルベースのルーティング: ディレクトリ構造に基づく自動ルーティング。
• APIルート: バックエンドを別途用意せずにプロジェクト内でAPIを作成可能。

2025年にNext.jsを選ぶ理由：

• Googleのトレンドであるスピード最適化に対応する高いパフォーマンス。
• 大規模なコミュニティ、豊富なドキュメント、継続的なアップデート。
• 小規模（ブログ）から大規模（Eコマースアプリ）まで対応可能。
• Tailwind CSS、Vercel、Supabaseなどの最新ツールとの優れた統合。

---

2. Next.jsの注目すべき機能

手を動かす前に、Next.jsの主なアプローチを2つ見てみましょう：

• App Router: Next.js 13以降の新しい方法で、Server Componentsを中心に、データ取得の簡素化とパフォーマンス最適化を重視。このシリーズではこちらを主に使用します。
• Pages Router: 従来の方法で、現在もサポートされていますが、新規プロジェクトにはあまり推奨されません。

その他にも：

• next/imageによる画像の自動最適化。
• 初期からTypeScriptをサポート。
• Vercelやその他のプラットフォームでの簡単なデプロイ。

---

3. システム要件とインストール

始めるために必要なもの：

• Node.js: バージョン18.x以降（2025年3月31日時点で最新のLTS版を推奨）。
• npmまたはYarn: パッケージ管理ツール（このガイドではnpmを使用）。
• Windows、macOS、またはLinuxが動作するコンピュータ。

インストール手順：

1. Node.jsの確認：
   • ターミナル（コマンドプロンプト、PowerShell、またはTerminal）を開く。
   • node -vを入力してバージョンを確認。未インストールの場合はnodejs.orgからダウンロード。
2. npmのインストール：
   • npmはNode.jsに付属。npm -vで確認。
3. （オプション）Yarnのインストール：
   • Yarnを使いたい場合、npm install -g yarnを実行。

---

4. create-next-appで最初のNext.jsプロジェクトを作成

最初のプロジェクトを作成します：

1. ターミナルで以下のコマンドを実行：

   npx create-next-app@latest my-first-nextjs-app
   

2. 設定に関する質問に回答：
   • TypeScript? Yes（より安全なコーディングのために推奨）。
   • ESLint? Yes（構文エラー検出に役立つ）。
   • Tailwind CSS? Yes（後でスタイリングに使用）。
   • App Router? Yes（新しい方法を選択）。
   • その他のオプション：デフォルトのまま（Enterを押す）。
3. 数秒待つとインストールが完了。

my-first-nextjs-appというディレクトリが作成されます。

---

5. アプリケーションの実行とディレクトリ構造の確認

アプリケーションの実行：

1. プロジェクトディレクトリに移動：

   cd my-first-nextjs-app
   

2. 開発サーバーを起動：

   npm run dev
   

3. ブラウザを開き、http://localhost:3000にアクセス。Next.jsのデフォルトのウェルカムページが表示されます。

ディレクトリ構造の確認：

• app/：ルーティングとメインインターフェースのファイルを格納。
  • page.tsx：ホームページ。
  • layout.tsx：アプリケーション全体の共通レイアウト。
• public/：画像やフォントなどの静的ファイルを保存。
• package.json：ライブラリとスクリプトのリスト。
• .eslintrc.json, tsconfig.json：ESLintとTypeScriptの設定。

---

実践：シンプルな「Hello World」ページの作成

1. コードエディタ（例：VS Code）でapp/page.tsxを開く。
2. デフォルトの内容を削除し、以下に置き換える：

   export default function Home() {
     return (
       <div>
         <h1>Next.jsからのHello World!</h1>
         <p>2025年のNext.js学習シリーズへようこそ。</p>
       </div>
     );
   }
   

3. ファイルを保存し、ブラウザに戻る。ホットリロードのおかげでページが自動更新されます。

---

エピソード1の終了

• 開発環境のセットアップが完了し、最初のNext.jsプロジェクトが実行できました。
• Next.jsの基本的な仕組みとディレクトリ構造を理解しました。

次回のエピソード：ルーティング（routing）について学び、ウェブサイトに複数のページを作成します。

---

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！