Освойте Next.js 15 с App Router, Server Components и Server Actions. Изучите лучшие практики современной веб-разработки с React и TypeScript.
# Next.js 15 Полное Руководство по Разработке
Создавайте современные высокопроизводительные веб-приложения с Next.js 15, используя новейшие возможности: 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>
);
}
```
## Серверные Действия (Server Actions)
```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: "Сообщение успешно отправлено" };
}
```
### Форма с Server Action
```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>
);
}
```
Это руководство поможет русскоязычным разработчикам освоить 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.