Next.js入門：モダンなReactアプリケーション開発の第一歩

Next.jsは、Reactベースの強力なフレームワークとして、現代のWeb開発において欠かせない存在となっています。本記事では、Next.jsの基本概念から実践的な使い方まで、初心者にも分かりやすく解説します。

Next.jsとは？

Next.jsは、Vercel社が開発しているReactフレームワークで、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、そしてクライアントサイドレンダリング（CSR）を統合的にサポートしています。これにより、SEOに優れ、高速で、開発効率の高いWebアプリケーションを構築できます。

Next.jsの主な特徴

• ファイルベースのルーティング
• 自動的なコード分割
• ビルトインのCSS サポート
• API ルートの提供
• TypeScriptのネイティブサポート

プロジェクトのセットアップ

Next.jsプロジェクトを始めるのは非常に簡単です。以下のコマンドを実行するだけで、新しいプロジェクトが作成されます。

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

これで、ローカルサーバーが起動し、http://localhost:3000 でアプリケーションにアクセスできます。

ページの作成

Next.jsでは、pagesディレクトリ（またはApp Routerを使用する場合はappディレクトリ）にファイルを作成するだけで、自動的にルーティングが設定されます。

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
}

データフェッチング

Next.jsは、複数のデータフェッチング方法を提供しています。

getStaticProps（静的生成）

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60秒ごとに再生成
  };
}

getServerSideProps（サーバーサイドレンダリング）

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data/${context.query.id}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

APIルートの作成

Next.jsでは、バックエンドAPIも同じプロジェクト内で作成できます。pages/apiディレクトリにファイルを作成するだけです。

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

スタイリング

Next.jsは、様々なスタイリング方法をサポートしています。

• CSS Modules
• Sass
• CSS-in-JS（styled-components、emotionなど）
• Tailwind CSS

// CSS Modulesの例
import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.button}>Click me</button>;
}

パフォーマンス最適化

Next.jsは、自動的に多くの最適化を行いますが、さらにパフォーマンスを向上させるためのツールも提供しています。

• next/imageによる画像最適化
• next/fontによるフォント最適化
• next/linkによるプリフェッチ
• dynamic importによる遅延ロード

まとめ

Next.jsは、Reactアプリケーション開発における多くの課題を解決し、開発者が本来のビジネスロジックに集中できる環境を提供します。本記事で紹介した基本概念を理解することで、モダンなWebアプリケーション開発の第一歩を踏み出すことができるでしょう。継続的に学習を進め、Next.jsの豊富な機能を活用して、より高品質なアプリケーションを構築していきましょう。