Next.js入門

Next.jsとは？

Next.jsは、Vercel社が開発した Reactベースのフルスタックフレームワークです。Reactだけでは難しいサーバーサイドレンダリング（SSR）、 静的サイト生成（SSG）、ファイルベースルーティング、APIルートなどの機能が標準で組み込まれています。

App Routerという新しいアーキテクチャにより、Server Componentsやストリーミングなど 最新のReact機能をフルに活用でき、高速でSEOに強いWebアプリケーションを効率的に開発できます。

Next.jsの基本概念

Next.jsを学ぶ前に、主要な概念を押さえましょう。

• App Router — フォルダ構造でルーティングを定義
• Server Components — サーバー側で実行されるコンポーネント
• Route Handlers — APIエンドポイントの作成
• レンダリング戦略 — SSR、SSG、ISR、CSRの使い分け
• データ取得 — サーバーでのfetchとキャッシュ制御

はじめてのNext.jsコード

Next.jsでは、appディレクトリ内にpage.tsxファイルを置くだけでページが作れます。

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>ようこそ、Next.jsへ！</h1>
      <p>はじめてのNext.jsアプリです。</p>
    </main>
  );
}

各レッスンで、この基本構造の上にルーティング、データ取得、API作成などの機能を積み上げていきます。