Начнем с создания нового проекта. Убедитесь, что у вас установлен Node.js. Откройте терминал и выполните команду: npx create-next-app@latest my-next-app. В процессе установки вам зададут несколько вопросов: использовать TypeScript? ESLint? Tailwind CSS? App Router vs Pages Router? Для новых проектов рекомендуется выбирать TypeScript, Tailwind CSS и новый App Router (который стал стандартом в Next.js 13+). После завершения перейдите в папку проекта и запустите dev-сервер: cd my-next-app && npm run dev. Откройте браузер по адресу http://localhost:3000.
Сердце нового App Router — это структура папок. Маршруты определяются папками внутри app. Каждая папка представляет собой сегмент пути. Специальные файлы с заранее определенными именами создают UI для этого сегмента. Самый важный — page.tsx. Создадим простую страницу «О нас». Создайте папку app/about и внутри нее файл page.tsx со следующим содержимым:
export default function AboutPage() {
return (
<h1>О нашей компании</h1>
<p>Мы создаем крутые приложения на Next.js!</p>
);
}
Теперь по адресу /about будет отображаться эта страница. Обратите внимание, что компонент страницы должен быть экспортирован по умолчанию.
Одна из самых мощных функций Next.js — выбор стратегии рендеринга. Давайте создадим блог, где посты будут статически сгенерированы во время сборки для максимальной скорости. Создадим маршрут app/blog/[slug]/page.tsx. Квадратные скобки означают динамический сегмент. Код для статической генерации:
import { getPostData, getAllPostSlugs } from '@/lib/posts';
export async function generateStaticParams() {
const slugs = await getAllPostSlugs();
return slugs.map((slug) => ({ slug }));
}
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await getPostData(params.slug);
return (
<h1>{post.title}</h1>
);
}
Функция generateStaticParams сообщает Next.js, какие пути (slugs) нужно предварительно отрендерить статически. Предположим, что функции getAllPostSlugs и getPostData читают данные из файловой системы или CMS.
Но что, если данные меняются часто? Используем Incremental Static Regeneration (ISR). Добавим revalidate в настройки страницы. Создадим app/news/page.tsx:
async function getLatestNews() {
const res = await fetch('https://api.example.com/news');
return res.json();
}
export const revalidate = 3600; // Регенерировать страницу каждый час
export default async function NewsPage() {
const news = await getLatestNews();
return (
-
{news.map((item) => (
- {item.title} ))}
}
Теперь страница будет статической, но автоматически обновляться в фоне раз в час, обеспечивая актуальность данных без необходимости полной пересборки.
Работа с формами и мутациями данных — обычная задача. В App Router для этого рекомендуется использовать Server Actions. Они позволяют выполнять код на сервере напрямую из React-компонентов. Создадим компонент для добавления комментария в app/components/AddCommentForm.tsx:
'use server';
export async function addComment(formData: FormData) {
const comment = formData.get('comment');
// Здесь код для сохранения комментария в базу данных
console.log('Сохранен комментарий:', comment);
}
// Клиентский компонент
'use client';
import { addComment } from '@/app/actions';
export function AddCommentForm() {
return (
Отправить
);
}
Обратите внимание на директивы 'use server' и 'use client'. Они определяют, где выполняется код. Server Actions выполняются на сервере, что безопасно для работы с секретами и базами данных.
Оптимизация изображений — еще одна сильная сторона Next.js. Компонент Image автоматически оптимизирует, изменяет размер и использует современные форматы. Пример:
import Image from 'next/image';
export default function Profile() {
return (
);
}
Next.js также предлагает мощную систему API-маршрутов. В App Router они создаются в папке app/api. Например, app/api/users/route.ts:
import { NextResponse } from 'next/server';
export async function GET(request: Request) {
const users = await db.getUsers(); // Предположим, что db - это ваша библиотека БД
return NextResponse.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
// Создание пользователя
return NextResponse.json({ success: true }, { status: 201 });
}
Это руководство лишь касается поверхности возможностей Next.js. Дальнейшие шаги включают изучение кэширования данных, middleware для логики на уровне запросов (аутентификация, редиректы), метаданных для SEO и интеграции с различными бэкендами. Благодаря своей гибкости и производительности Next.js является идеальным фреймворком для проектов любого масштаба.
Комментарии (11)