Next.js徹底入門：12章で学ぶ最新Web開発

第1章：Next.jsとは何か

Next.jsは、Reactをベースにした強力なフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、現代のWeb開発に必要な機能を標準で備えています。React単体ではクライアントサイドレンダリングが中心ですが、Next.jsを使うことでSEOに強く、高速に表示されるWebサイトを簡単に構築できます。Vercel社が開発しており、開発からデプロイ、スケーリングまで一貫してサポートされているのも特徴です。

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

第2章：ディレクトリ構成とページ自動ルーティング

Next.jsプロジェクトを作成すると、pagesディレクトリが自動生成されます。この中にファイルを追加するだけで、そのファイル名がそのままURLルートになります。たとえばpages/about.jsを作成すれば、/aboutでアクセス可能です。React Routerのような設定は不要で、ファイルベースのルーティングが直感的に使えます。

// pages/about.js
export default function About() {
  return <h1>このページはAboutページです</h1>;
}

第3章：トップページを作る

pages/index.jsは自動的にトップページに割り当てられます。ここにReactコンポーネントを記述するだけで、/にアクセスした際の表示内容を制御できます。Next.jsではHeadコンポーネントを使ってmeta情報も簡単に追加できます。

// pages/index.js
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Next.js入門</title>
        <meta name="description" content="Next.jsの基本を学ぼう" />
      </Head>
      <h1>Next.jsへようこそ！</h1>
    </>
  );
}

第4章：Linkコンポーネントによるページ遷移

Next.jsのLinkコンポーネントを使うと、クライアントサイドで高速にページ遷移ができます。aタグの代わりにLinkを使い、hrefで遷移先を指定します。

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/about">
        <a>Aboutページへ</a>
      </Link>
    </div>
  );
}

第5章：動的ルーティング

ブログ記事や商品詳細ページなど、URLの一部が動的に変わる場合は、pagesディレクトリ内でファイル名を[param].jsのようにします。useRouterフックでパラメータを取得できます。

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>記事ID: {id}</h1>;
}

第6章：静的サイト生成（SSG）

Next.jsではgetStaticPropsを使ってビルド時にデータを取得し、静的なページを生成できます。これにより、表示速度とSEOが大幅に向上します。

// pages/static.js
export async function getStaticProps() {
  return {
    props: { message: 'これは静的に生成されたページです' }
  };
}

export default function StaticPage({ message }) {
  return <div>{message}</div>;
}

第7章：サーバーサイドレンダリング（SSR）

getServerSidePropsを用いると、リクエストごとにサーバー側でデータを取得し、ページを生成できます。リアルタイム性が求められるページに最適です。

// pages/server.js
export async function getServerSideProps() {
  const time = new Date().toLocaleString();
  return { props: { time } };
}

export default function ServerPage({ time }) {
  return <div>現在時刻: {time}</div>;
}

第8章：APIルートの作成

Next.jsではpages/apiディレクトリ内にファイルを作成するだけでAPIエンドポイントが作れます。バックエンド機能を簡単に追加でき、フルスタック開発が可能です。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API!' });
}

第9章：スタイリング（CSS Modules）

Next.jsはCSS Modulesを標準サポートしており、コンポーネントごとにスコープされたCSSを利用できます。stylesディレクトリ内にHome.module.cssなどを作成し、インポートして使います。

/* styles/Home.module.css */
.title {
  color: #0070f3;
  font-size: 2rem;
}

// pages/index.js
import styles from '../styles/Home.module.css';

export default function Home() {
  return <h1 className={styles.title}>Next.js スタイリング例</h1>;
}

第10章：画像最適化（next/image）

next/imageコンポーネントを使うと、画像の自動最適化やレスポンシブ対応ができます。WebP変換や遅延読み込みも自動で行われます。

// pages/image.js
import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/vercel.svg"
      alt="Vercel Logo"
      width={200}
      height={100}
    />
  );
}

第11章：APIとの連携とデータフェッチ

外部APIからデータを取得する場合、getStaticPropsやgetServerSideProps内でfetchを使います。クライアントサイドで取得したい場合はuseEffectとuseStateを活用します。

// pages/users.js
import { useEffect, useState } from 'react';

export default function Users() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(setUsers);
  }, []);
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

第12章：レイアウトと共通コンポーネント

複数ページで共通のレイアウト（ヘッダーやフッター）を使いたい場合は、pages/_app.jsでラップします。これにより全ページで共通のUIを持たせることができます。

// pages/_app.js
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <header style={{ background: '#eee', padding: 10 }}>共通ヘッダー</header>
      <Component {...pageProps} />
      <footer style={{ background: '#eee', padding: 10 }}>共通フッター</footer>
    </>
  );
}

まとめ

Next.jsは、Reactの開発体験を大きく向上させるフレームワークです。ファイルベースのルーティング、SSR・SSG・APIルートなど、現代Web開発に必要な機能がオールインワンで揃っています。今回紹介した12章を通じて、Next.jsの基本から応用まで体系的に学ぶことができました。実際に手を動かして、より高度なWebアプリ開発にチャレンジしてみてください。