Next.jsの始め方：モダンなWebアプリケーション開発入門

# Next.jsの始め方：モダンなWebアプリケーション開発入門

Next.jsは、Reactベースのフレームワークで、モダンなWebアプリケーション開発に最適な機能を提供します。この記事では、Next.jsの基本的な使い方から、実際のアプリケーション開発まで解説していきます。

1. 開発環境のセットアップ

必要なツール - Node.js (v18.0.0以上) - npm または yarn - VSCode（推奨エディタ） - Git

VSCodeの推奨拡張機能 - ESLint - Prettier - Tailwind CSS IntelliSense - TypeScript and JavaScript Language Features

2. プロジェクトの作成

Next.jsプロジェクトを作成するには、以下のコマンドを実行します：

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

セットアップ時に以下の質問が表示されます：

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes
Would you like to use `src/` directory? › Yes
Would you like to use App Router? › Yes
Would you like to customize the default import alias (@/*)? › Yes

3. プロジェクト構造の理解

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

my-blog/
  ├── src/
  │   ├── app/
  │   │   ├── page.tsx        # ホームページ
  │   │   ├── layout.tsx      # ルートレイアウト
  │   │   └── globals.css     # グローバルスタイル
  │   ├── components/         # 共通コンポーネント
  │   └── lib/               # ユーティリティ関数
  ├── public/                # 静的ファイル
  ├── tailwind.config.js     # Tailwind CSS設定
  ├── tsconfig.json          # TypeScript設定
  └── package.json           # プロジェクト設定

4. 最初のページ作成

`src/app/page.tsx`に以下のようなコードを書きます：

import { Button } from "@/components/ui/button";

export default function Home() { return ( <main className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"> <div className="max-w-4xl mx-auto px-4 py-16"> <h1 className="text-4xl font-bold text-white mb-4"> Welcome to My Blog </h1> <p className="text-xl text-slate-300 mb-8"> Next.jsとTypeScriptで作られたモダンなブログサイトです。 </p> <Button className="bg-cyan-500 hover:bg-cyan-600"> 記事を読む </Button> </div> </main> ); } ```

5. コンポーネントの作成

共通コンポーネントを作成して、再利用可能なUIを構築します：

// src/components/ui/card.tsx
import { cn } from "@/lib/utils";

interface CardProps extends React.HTMLAttributes<HTMLDivElement> { children: React.ReactNode; }

export function Card({ className, children, ...props }: CardProps) { return ( <div className={cn( "rounded-lg border border-slate-700 bg-slate-800/50 p-6", className )} {...props} > {children} </div> ); } ```

6. スタイリング

Tailwind CSSを使用して、モダンでレスポンシブなデザインを実装します：

// src/app/articles/page.tsx
export default function ArticlesPage() {
  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      {articles.map((article) => (
        <Card key={article.slug} className="hover:border-cyan-500/50 transition-colors">
          <h2 className="text-xl font-bold text-white mb-2">
            {article.title}
          </h2>
          <p className="text-slate-300 text-sm">
            {article.excerpt}
          </p>
        </Card>
      ))}
    </div>
  );
}

7. データフェッチング

Next.jsのデータフェッチング機能を使用して、記事データを取得します：

// src/lib/articles.ts
export async function getArticles() {
  // 実際のアプリケーションでは、APIやデータベースからデータを取得
  return articles;
}

export async function getArticleBySlug(slug: string) { return articles.find((article) => article.slug === slug); } ```

8. デプロイ

Vercelを使用して、アプリケーションを簡単にデプロイできます：

1. GitHubにリポジトリをプッシュ 2. Vercelでプロジェクトをインポート 3. 環境変数の設定（必要な場合） 4. デプロイの実行

git add .
git commit -m "Initial commit"
git push origin main

まとめ

Next.jsを使うことで、以下のような利点があります：

- ファイルシステムベースのルーティング - サーバーサイドレンダリングと静的生成 - 自動的なコード分割 - 最適化された画像処理 - TypeScriptのサポート - Tailwind CSSによる効率的なスタイリング - 優れた開発者体験

これらの機能を活用することで、効率的で保守性の高いWebアプリケーションを構築することができます。

次のステップ

- 認証機能の追加（NextAuth.js） - データベースの統合（Prisma + PostgreSQL） - パフォーマンスの最適化 - SEO対策 - テストの実装

これらの機能については、今後の記事で詳しく解説していく予定です。