Next.jsを使ったWebサイト制作の考え方と実践

Web開発において、フレームワークの選定は非常に重要です。その中でも、ReactをベースにしたNext.jsは、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）といった機能を提供し、高速でSEOに強いWebサイトを構築するための強力なツールです。

1. Next.jsの基本的な特徴とメリット

Next.jsを選ぶ理由として、以下の特徴が挙げられます。

サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）: SEO対策に強力。
ページルーティングが簡単: ファイルベースのルーティング。
APIルートの提供: バックエンドの簡易構築が可能。
CSSや画像の最適化: パフォーマンスの向上。
Reactとの親和性: Reactエコシステムを最大限活用可能。

これらの特徴を活用することで、効率的にユーザー体験の良いWebサイトを制作できます。

2. プロジェクトの初期設定

2.1 必要なツールの準備

Next.jsプロジェクトを始める前に、以下のツールをインストールしてください。

Node.js（推奨バージョンをインストール）
yarn（npmでインストール可能）

npm install -g yarn

2.2 プロジェクトの作成

以下のコマンドでNext.jsのプロジェクトを作成します。

yarn create next-app my-nextjs-app --typescript

このコマンドにより、TypeScriptが有効化されたNext.jsプロジェクトが作成されます。my-nextjs-appはプロジェクト名です。

2.3 ディレクトリ構造

作成されたプロジェクトのディレクトリ構造は以下のようになります。

my-nextjs-app/
├── pages/　→ ページの大元を格納
├── public/　→　画像など格納
├── styles/
├── components/　→ サイトを部分わけして格納
├── next.config.js
├── tsconfig.json
└── package.json

主に編集するフォルダは以下の通りです：

pages/: ページコンポーネントを配置。
components/: 再利用可能なコンポーネントを配置。
styles/: CSSファイルを配置。

3. 実践：シンプルなWebサイトの作成

3.1 ホームページの作成

pages/index.tsxを編集して、ホームページを作成します。

import React from 'react';
import Head from 'next/head';

const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>My Next.js Website</title>
        <meta name="description" content="Next.jsを使ったWebサイト" />
      </Head>
      <main>
        <h1>Welcome to My Next.js Website</h1>
        <p>Next.jsを使ってWebサイトを構築しましょう！</p>
      </main>
    </div>
  );
};

export default Home;

3.2 コンポーネントの作成

再利用可能なヘッダーコンポーネントを作成します。

components/Header.tsx:

import React from 'react';

const Header: React.FC = () => {
  return (
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

これをホームページにインポートして利用します。

pages/index.tsx:

import Header from '../components/Header';

const Home: React.FC = () => {
  return (
    <div>
      <Header />
      <main>
        <h1>Welcome to My Next.js Website</h1>
        <p>Next.jsを使ってWebサイトを構築しましょう！</p>
      </main>
    </div>
  );
};

3.3 スタイルの適用

styles/global.cssに基本スタイルを記述します。

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}
h1 {
  color: #333;
}

Next.jsのpages/_app.tsxでスタイルを読み込みます。

import '../styles/global.css';
import { AppProps } from 'next/app';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default MyApp;