Установка
Системные требования:
- Node.js 18.17 или новее.
- Поддерживаются macOS, Windows (включая WSL) и Linux.
Автоматическая установка
Рекомендуем создавать новое приложение Next.js с помощью create-next-app, который автоматически настроит всё необходимое. Для создания проекта выполните:
npx create-next-app@latestВо время установки вы увидите следующие запросы:
Как назвать ваш проект? my-app
Использовать TypeScript? Нет / Да
Использовать ESLint? Нет / Да
Использовать Tailwind CSS? Нет / Да
Использовать директорию `src/`? Нет / Да
Использовать App Router? (рекомендуется) Нет / Да
Настроить псевдонимы импорта (@/*) по умолчанию? Нет / Да
Какой псевдоним импорта использовать? @/*После ответов create-next-app создаст папку с именем вашего проекта и установит необходимые зависимости.
Если вы новичок в Next.js, ознакомьтесь с документацией по структуре проекта для обзора всех возможных файлов и папок в вашем приложении.
Полезно знать:
- Next.js теперь включает конфигурацию TypeScript, ESLint и Tailwind CSS по умолчанию.
- Вы можете использовать директорию
srcв корне проекта для отделения кода приложения от конфигурационных файлов.
Ручная установка
Для ручного создания приложения Next.js установите необходимые пакеты:
npm install next@latest react@latest react-dom@latestОткройте файл package.json и добавьте следующие scripts:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}Эти скрипты соответствуют различным этапам разработки приложения:
dev: запускаетnext devдля старта Next.js в режиме разработки.build: запускаетnext buildдля сборки приложения для production.start: запускаетnext startдля запуска production-сервера Next.js.lint: запускаетnext lintдля настройки встроенной конфигурации ESLint в Next.js.
Создание директорий
Next.js использует файловую маршрутизацию, что означает, что маршруты в вашем приложении определяются структурой файлов.
Директория app
Для новых приложений рекомендуем использовать App Router. Этот роутер позволяет использовать последние возможности React и является эволюцией Pages Router на основе отзывов сообщества.
Создайте папку app/, затем добавьте файлы layout.tsx и page.tsx. Они будут отображаться при посещении пользователем корня вашего приложения (/).
Создайте корневой макет в app/layout.tsx с обязательными тегами <html> и <body>:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Наконец, создайте домашнюю страницу app/page.tsx с начальным содержимым:
export default function Page() {
return <h1>Hello, Next.js!</h1>
}export default function Page() {
return <h1>Hello, Next.js!</h1>
}Полезно знать: Если вы забудете создать
layout.tsx, Next.js автоматически создаст этот файл при запуске сервера разработки командойnext dev.
Узнайте больше о использовании App Router.
Директория pages (опционально)
Если вы предпочитаете использовать Pages Router вместо App Router, создайте директорию pages/ в корне проекта.
Затем добавьте файл index.tsx в папку pages. Это будет ваша домашняя страница (/):
export default function Page() {
return <h1>Hello, Next.js!</h1>
}Далее добавьте файл _app.tsx в pages/ для определения глобального макета. Узнайте больше о пользовательском файле App.
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}Наконец, добавьте файл _document.tsx в pages/ для управления начальным ответом сервера. Узнайте больше о пользовательском файле Document.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Узнайте больше о использовании Pages Router.
Полезно знать: Хотя вы можете использовать оба роутера в одном проекте, маршруты в
appбудут иметь приоритет надpages. Рекомендуем использовать только один роутер в новом проекте, чтобы избежать путаницы.
Папка public (опционально)
Создайте папку public для хранения статических ресурсов, таких как изображения, шрифты и т.д. Файлы внутри public могут быть доступны в коде, начиная с базового URL (/).
Запуск сервера разработки
- Выполните
npm run devдля запуска сервера разработки. - Откройте
http://localhost:3000для просмотра приложения. - Измените файл
app/page.tsx(илиpages/index.tsx) и сохраните его, чтобы увидеть обновлённый результат в браузере.