Установка

Требования к системе:

Node.js 18.17 или более поздней версии.
Поддерживаются macOS, Windows (включая WSL) и Linux.

Автоматическая установка

Мы рекомендуем начать новый проект Next.js с помощью create-next-app, который автоматически настраивает все для вас. Чтобы создать проект, выполните команду:

npx create-next-app@latest

При установке вы увидите следующие запросы:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

После запросов 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 для построения приложения для использования в режиме производства.
start: запускает next start для запуска сервера Next.js в режиме производства.
lint: запускает next lint для настройки встроенной конфигурации ESLint в Next.js.

Создание директорий

Next.js использует маршрутизацию на основе файловой системы, что означает, что маршруты в вашем приложении определяются структурой ваших файлов.

Директория app

Для новых приложений мы рекомендуем использовать маршрутизатор App. Этот маршрутизатор позволяет использовать самые свежие возможности React и является развитием маршрутизатора Pages на основе обратной связи сообщества.

Создайте папку app/, затем добавьте файлы layout.tsx и page.tsx. Они будут отображаться при посещении корневого маршрута вашего приложения (/).

Создайте root layout внутри app/layout.tsx с необходимыми тегами <html> и <body>.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Наконец, создайте домашнюю страницу app/page.tsx с некоторым начальным содержимым:

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/ для определения глобального макета. Узнайте больше о файле custom App.

import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Наконец, добавьте файл _document.tsx внутри pages/ для управления начальным ответом сервера. Узнайте больше о файле custom 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) и сохраните его, чтобы увидеть обновлённые результаты в браузере.