Next.js 15のApp Router、Server Components、Server Actionsをマスターしましょう。ReactとTypeScriptを使用したモダンなWeb開発のベストプラクティスを学びます。
# Next.js 15 完全開発ガイド
Next.js 15を使用して、モダンで高性能なWebアプリケーションを構築しましょう。App Router、Server Components、Server Actionsなどの最新機能を活用します。
## プロジェクトのセットアップ
### 新規プロジェクトの作成
```bash
npx create-next-app@latest my-project --typescript --tailwind --app
cd my-project
npm run dev
```
### 推奨ディレクトリ構造
```
my-project/
├── src/
│ ├── app/ # App Router(ルートとページ)
│ │ ├── layout.tsx # メインレイアウト
│ │ ├── page.tsx # ホームページ
│ │ ├── loading.tsx # ローディング状態
│ │ └── error.tsx # エラーハンドリング
│ ├── components/ # 再利用可能なコンポーネント
│ │ ├── ui/ # UIコンポーネント
│ │ └── forms/ # フォームコンポーネント
│ ├── lib/ # ユーティリティと設定
│ └── types/ # TypeScript型定義
└── next.config.ts # Next.js設定
```
## サーバーコンポーネント
サーバーコンポーネントは完全にサーバーでレンダリングされ、クライアントに送信されるJavaScriptを削減します。
### サーバーコンポーネントの例
```typescript
// app/products/page.tsx
import { getProducts } from "@/lib/api";
// このコンポーネントは完全にサーバーでレンダリングされます
export default async function ProductsPage() {
// useEffectなしで直接データを取得
const products = await getProducts();
return (
<main className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">商品一覧</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{products.map((product) => (
<article key={product.id} className="border rounded-lg p-4">
<h2 className="text-xl font-semibold">{product.name}</h2>
<p className="text-gray-600">{product.description}</p>
<span className="text-lg font-bold text-blue-600">
¥{product.price}
</span>
</article>
))}
</div>
</main>
);
}
```
## サーバーアクション
```typescript
// app/actions/contact.ts
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";
const contactSchema = z.object({
name: z.string().min(2, "名前は2文字以上必要です"),
email: z.string().email("有効なメールアドレスを入力してください"),
message: z.string().min(10, "メッセージは10文字以上必要です"),
});
export async function submitContact(formData: FormData) {
const data = {
name: formData.get("name") as string,
email: formData.get("email") as string,
message: formData.get("message") as string,
};
const result = contactSchema.safeParse(data);
if (!result.success) {
return {
success: false,
errors: result.error.flatten().fieldErrors,
};
}
await saveMessage(result.data);
revalidatePath("/contact");
return { success: true, message: "メッセージを送信しました" };
}
```
### サーバーアクションを使用したフォーム
```typescript
// components/ContactForm.tsx
"use client";
import { useFormState, useFormStatus } from "react-dom";
import { submitContact } from "@/app/actions/contact";
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
disabled={pending}
className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
>
{pending ? "送信中..." : "メッセージを送信"}
</button>
);
}
export function ContactForm() {
const [state, action] = useFormState(submitContact, null);
return (
<form action={action} className="space-y-4 max-w-md">
<div>
<label htmlFor="name" className="block text-sm font-medium">
お名前
</label>
<input
type="text"
id="name"
name="name"
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
{state?.errors?.name && (
<p className="text-red-500 text-sm">{state.errors.name}</p>
)}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium">
メールアドレス
</label>
<input
type="email"
id="email"
name="email"
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium">
メッセージ
</label>
<textarea
id="message"
name="message"
rows={4}
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
</div>
<SubmitButton />
{state?.success && (
<p className="text-green-600">{state.message}</p>
)}
</form>
);
}
```
## データ取得とキャッシュ
```typescript
// lib/api.ts
export async function getProducts() {
const res = await fetch("https://api.example.com/products", {
next: { revalidate: 3600 }, // 1時間キャッシュ
});
if (!res.ok) {
throw new Error("商品データを読み込めませんでした");
}
return res.json();
}
```
このガイドは日本語開発者がNext.js 15をマスターするのに役立ちます。This nextjs prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their nextjs implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For nextjs projects, consider mentioning your framework version, coding style, and any specific libraries you're using.