Next.jsで始めるモダンWebアプリ開発

Next.jsは、Reactベースの強力なフレームワークです。この記事では、Next.jsを使ったモダンなWebアプリケーション開発について解説します。

Next.jsの主な特徴

Next.jsには以下のような特徴があります：

1. サーバーサイドレンダリング（SSR）
2. 静的サイト生成（SSG）
3. ファイルベースルーティング
4. API Routes
5. 画像最適化

App Routerの基本

Next.js 13以降で導入されたApp Routerを使うと、より直感的にアプリケーションを構築できます。

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
    </main>
  );
}

データフェッチング

Next.jsでは、様々な方法でデータをフェッチできます。

サーバーコンポーネントでのデータフェッチ

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <div>
      {posts.map((post: any) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}

画像の最適化

Next.jsのImageコンポーネントを使うと、自動的に画像を最適化できます。

import Image from 'next/image';

export default function ProfilePicture() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile Picture"
      width={500}
      height={500}
      priority
    />
  );
}

メタデータの設定

SEO対策として、各ページにメタデータを設定しましょう。

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Page Title',
  description: 'Page description for SEO',
};

export default function Page() {
  return <h1>My Page</h1>;
}

まとめ

Next.jsは、モダンなWebアプリケーション開発に必要な機能が揃った優れたフレームワークです。

サーバーサイドレンダリングや静的サイト生成など、パフォーマンスに優れたアプリケーションを簡単に構築できます。

ぜひ、Next.jsを使って素晴らしいWebアプリケーションを作ってみてください！