UnleashZealUpliftPersevereOvercomeDrive

Next.jsを振り返る

これまで取り組んできた内容を振り返り、備忘録としてまとめました。

📌 目次

  1. Next.js のセットアップ
  2. ページとルーティング
  3. API ルートの実装
  4. スタイリングとデザイン
  5. データフェッチングの方法

Next.jsのセットアップ

まず、Next.js プロジェクトを初期化するところからスタートしました。
以下のコマンドで簡単にセットアップが可能です。

npx create-next-app@latest <アプリ名>
cd <アプリ名>
npm run dev

上記コマンドの実行後、プロジェクトディレクトリが作成され、localhost:3000 でローカル環境が起動します。

ページとルーティング

Next.js の特徴的な機能として、ファイルベースルーティングがあります。
例えば、pages ディレクトリに以下のようなファイルを作成すると、自動的にルートが設定されます。

pages/index.js → /
pages/about.js → /about

コード例：

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

API ルートの実装

Next.js では、バックエンドの API を簡単に実装できます。
pages/api ディレクトリにファイルを作成することで、API エンドポイントが生成されます。

例：pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js!' });
}

ブラウザで /api/hello にアクセスすると、{"message":"Hello, Next.js!"} が返されます。

スタイリングとデザイン

Next.js では以下の方法でスタイリングが可能です：

CSS Modules

/* styles/Home.module.css */
.title {
  color: blue;
}

import styles from '../styles/Home.module.css';

export default function Home() {
  return <h1 className={styles.title}>Welcome to Next.js!</h1>;
}

※Tailwind CSS Tailwind CSS を導入して、スタイリングを行うことも可能です。
詳しい内容は、今後、別記事として作成予定。

<Tailwind CSSの導入>

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

データフェッチングの方法

Next.js では、以下の 3 つの方法でデータをフェッチできます。

1. getStaticProps

静的サイト生成（SSG）のためのデータ取得

  • ビルド時にデータを取得して静的なHTMLとして出力。
  • ページの表示が高速。
  • データが頻繁に変わらないページに最適。
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return { props: { posts } };
}

2. getServerSideProps

サーバーサイドレンダリング（SSR）のためのデータ取得

  • リクエストごとにサーバー側でデータを取得してページを生成。
  • 最新のデータを常に表示できる。
  • 初回ロードが少し遅くなる可能性がある。
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/user/${context.params.id}`);
  const userData = await res.json();

  return { props: { userData } };
}

3. useEffect

クライアントサイドでデータを取得

  • ページが表示された後にクライアントサイドでデータを取得。
  • 初回表示は早いが、データ取得中はローディング表示が必要。
  • リアルタイム性が必要な動的データに向いている。
import { useEffect, useState } from 'react';

export default function Comments() {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    fetch('/api/comments')
      .then((res) => res.json())
      .then((data) => setComments(data));
  }, []);

  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}
← TOP