「Next.js、Reactと何が違うの？」と疑問に思っていませんか？
現役WEBエンジニアとして、Next.jsで開発しています。
この記事では、Next.jsの基本を解説します。
目次
Next.jsとは
Reactとの違い
| 項目 | React | Next.js |
|---|---|---|
| ルーティング | 別途必要 | 組み込み |
| SSR/SSG | 別途必要 | 組み込み |
| API Routes | なし | あり |
| 最適化 | 手動 | 自動 |
Next.jsのメリット
- ファイルベースルーティング
- サーバーサイドレンダリング
- 自動的な最適化
- Vercelとの連携
環境構築
# プロジェクト作成
npx create-next-app@latest my-app
# 推奨設定
# TypeScript: Yes
# ESLint: Yes
# Tailwind CSS: Yes
# App Router: Yes
cd my-app
npm run dev
App Router基本
ファイル構成
app/
├── layout.tsx # 共通レイアウト
├── page.tsx # / ページ
├── about/
│ └── page.tsx # /about ページ
└── blog/
└── [slug]/
└── page.tsx # /blog/xxx ページ
基本的なページ
// app/page.tsx
export default function Home() {
return (
<main>
<h1>Welcome to Next.js</h1>
</main>
);
}
レイアウト
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
データフェッチ
Server Component（デフォルト）
// サーバーでデータ取得
async function getData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}
export default async function Page() {
const data = await getData();
return <div>{data.title}</div>;
}
Client Component
'use client'
import { useState, useEffect } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
API Routes
// app/api/hello/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ message: 'Hello' });
}
export async function POST(request: Request) {
const body = await request.json();
return NextResponse.json({ received: body });
}
デプロイ
Vercel（推奨）
# Vercel CLIインストール
npm i -g vercel
# デプロイ
vercel
その他
- Netlify
- AWS Amplify
- セルフホスティング
まとめ
Next.js入門のポイント:
- App Routerを使う
- Server/Client Componentを理解
- ファイルベースルーティング
- Vercelでデプロイ
