利用者アンケート実施中：2024/12/1まで
Zenn
😽

Next.js 13.4のappディレクトリで実現する高速でスケーラブルなブログ構築

2024/10/21に公開
Next.js
React
ブログ
パフォーマンス
appディレクトリ
tech

Next.js 13.4 の app ディレクトリでブログを 🚀

Next.js 13.4 の登場により、開発者はかつてないほど高速でスケーラブルなブログを構築できるようになりました。
新しい app ディレクトリとサーバーコンポーネントの導入により、パフォーマンスと SEO の向上、動的なコンテンツの生成が容易になりました。
このガイドでは、app ディレクトリを活用してブログを構築するためのステップバイステップのガイドと、最新の機能の利点を紹介します。

1. プロジェクトのセットアップ 🏗️

まず、新しい Next.js プロジェクトを作成しましょう。
ターミナルで次のコマンドを実行します。

npx create-next-app@latest my-blog --ts

このコマンドは、TypeScript を使用した新しい Next.js プロジェクトを作成します。
--ts フラグを省略すると、JavaScript を使用したプロジェクトが作成されます。

2. app ディレクトリへの移行 🚶

Next.js 13.4 以降は、pages ディレクトリではなく、app ディレクトリにコードを配置します。
app ディレクトリには、サーバーコンポーネントとレイアウト、ルーティング、データフェッチなどの機能が含まれます。
新しいプロジェクトでは、app ディレクトリがすでに作成されているはずです。
既存のプロジェクトに移行する場合は、以下の手順に従います。

  1. pages ディレクトリ内のすべてのファイルを app ディレクトリに移動します。
  2. pages ディレクトリを削除します。
  3. ルートレベルに app/layout.js ファイルを作成します。
  4. app/layout.js ファイルに以下のコードを追加します。
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Blog',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

このコードは、ブログのルートレベルのレイアウトを定義しています。
Metadata オブジェクトを使用して、ページのタイトルと説明を設定できます。

3. ブログの構造 🏗️

ブログの構造は、個々の記事を管理するための重要な要素です。
ここでは、一般的なブログ構造の例を紹介します。

app/
├── page.js
├── blog/
│   ├── index.js
│   └── [slug].js
└── layout.js
  • app/page.js は、ブログのホームページを表します。
  • app/blog/index.js は、すべてのブログ記事の一覧を表示します。
  • app/blog/[slug].js は、個々のブログ記事のコンテンツを表示します。
  • app/layout.js は、ブログ全体のレイアウトを定義します。

4. ブログ記事のデータ 📚

ブログ記事のデータは、データベースや Markdown ファイルなど、さまざまな方法で管理できます。
ここでは、Markdown ファイルを使用した例を紹介します。

  • app/blog/posts ディレクトリを作成します。
  • 各記事の Markdown ファイルを app/blog/posts ディレクトリに配置します。
---
title: ブログ記事のタイトル
date: 2023-10-26
description: 記事の簡単な説明
---

この記事の内容

5. データのフェッチ 📥

サーバーコンポーネントを使用すると、データのフェッチをサーバー側で行うことができ、パフォーマンスを向上させることができます。
app/blog/index.js ファイルで、fetch 関数を使用してデータを取得し、posts 配列に格納します。

import { Metadata } from 'next';
import { fetchPosts } from '../lib/posts';

export const metadata: Metadata = {
  title: 'ブログ記事一覧',
  description: '最新のブログ記事',
};

export default async function BlogPage() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>最新のブログ記事</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}
  • fetchPosts 関数は、app/lib/posts.js ファイルで定義します。
  • fetchPosts 関数は、posts ディレクトリ内の Markdown ファイルを読み取り、各ファイルのメタデータとコンテンツを解析します。

6. 個別記事の表示 🔍

app/blog/[slug].js ファイルで、slug パラメータを使用して、特定のブログ記事のコンテンツを取得します。

import { Metadata } from 'next';
import { getPostBySlug } from '../lib/posts';

export const metadata: Metadata = {
  title: 'ブログ記事タイトル',
  description: '記事の簡単な説明',
};

export default async function PostPage({ params }) {
  const post = await getPostBySlug(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </div>
  );
}
  • getPostBySlug 関数は、app/lib/posts.js ファイルで定義します。
  • getPostBySlug 関数は、slug パラメータを使用して、対応する Markdown ファイルのメタデータとコンテンツを取得します。

7. SEO の最適化 📈

app ディレクトリでは、サーバーサイドレンダリングと静的サイト生成 (SSG) が自動的に使用されるため、SEO の最適化が簡単です。
Metadata オブジェクトを使用して、各ページのタイトル、説明、キーワードなどを定義できます。
また、next/head コンポーネントを使用して、メタタグやその他の HTML ヘッダーを追加できます。

8. カスタムレイアウト 🎨

ブログ全体のレイアウトは、app/layout.js ファイルで定義します。
ここでは、ナビゲーションメニュー、ヘッダー、フッターなどの共通要素を追加できます。

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Blog',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>My Blog</title>
        <meta name="description" content="My blog website" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body>
        <header>
          <h1>My Blog</h1>
          <nav>
            <ul>
              <li>
                <a href="/">ホーム</a>
              </li>
              <li>
                <a href="/blog">ブログ</a>
              </li>
            </ul>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>&copy; 2023 My Blog</p>
        </footer>
      </body>
    </html>
  );
}

9. スタイルの適用 🎨

Next.js 13.4 では、CSS Modules や Styled-Components などのさまざまな方法でスタイルを適用できます。
ここでは、CSS Modules を使用した例を紹介します。

  • app/global.css ファイルを作成し、グローバルなスタイルを追加します。
  • 各コンポーネントのスタイルは、対応するコンポーネントファイルの styles.module.css ファイルで定義します。
  • className 属性を使用して、スタイルを適用します。
// app/global.css
body {
  font-family: sans-serif;
}

// app/blog/index.js
import styles from './styles.module.css';

export default async function BlogPage() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1 className={styles.title}>最新のブログ記事</h1>
      <ul className={styles.posts}>
        {posts.map((post) => (
          <li key={post.slug} className={styles.post}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/blog/index.js
import styles from './styles.module.css';

.title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.posts {
  list-style: none;
  padding: 0;
}

.post {
  margin-bottom: 1rem;
}

10. 動的なコンテンツ 🔄

app ディレクトリでは、サーバーコンポーネントを使用して動的なコンテンツを簡単に生成できます。
たとえば、ブログのサイドバーに人気の記事をリストアップできます。

// app/blog/[slug].js
import { Metadata } from 'next';
import { getPostBySlug } from '../lib/posts';
import { getPopularPosts } from '../lib/posts';

export const metadata: Metadata = {
  title: 'ブログ記事タイトル',
  description: '記事の簡単な説明',
};

export default async function PostPage({ params }) {
  const post = await getPostBySlug(params.slug);
  const popularPosts = await getPopularPosts();

  return (
    <div>
      <main>
        <h1>{post.title}</h1>
        <p>{post.date}</p>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </main>
      <aside>
        <h2>人気の記事</h2>
        <ul>
          {popularPosts.map((post) => (
            <li key={post.slug}>
              <a href={`/blog/${post.slug}`}>{post.title}</a>
            </li>
          ))}
        </ul>
      </aside>
    </div>
  );
}
  • getPopularPosts 関数は、app/lib/posts.js ファイルで定義します。
  • getPopularPosts 関数は、データベースやその他のデータソースから人気の記事を取得します。

11. デプロイ 🚀

ブログをデプロイするには、Vercel などのホスティングサービスを使用できます。
Vercel は、Next.js の作成者によって開発されたホスティングサービスであり、Next.js プロジェクトのデプロイを簡単に行うことができます。

12. まとめ ✨

Next.js 13.4 の app ディレクトリは、高速でスケーラブルなブログを構築するための強力なツールです。
サーバーコンポーネント、データフェッチ、SEO の最適化などの機能を活用することで、素晴らしいブログ体験を提供できます。

注記:

  • この記事は、基本的なブログ構築の例を示しています。
  • 実際のブログでは、より複雑な機能やデザインが必要になる場合があります。
  • 最新の Next.js の機能や API については、公式ドキュメントを参照してください。

Discussion

ログインするとコメントできます