Создание нового приложения Next.js

Системные требования

Перед началом работы убедитесь, что ваша система соответствует следующим требованиям:

Node.js 18.18 или новее.
macOS, Windows (включая WSL) или Linux.

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

Самый быстрый способ создать новое приложение Next.js — использовать create-next-app, который автоматически настроит всё необходимое. Чтобы создать проект, выполните:

Терминал

npx create-next-app@latest

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

Терминал

Как назвать ваш проект? my-app
Хотите использовать TypeScript? Нет / Да
Хотите использовать ESLint? Нет / Да
Хотите использовать Tailwind CSS? Нет / Да
Хотите разместить код в директории `src/`? Нет / Да
Хотите использовать App Router? (рекомендуется) Нет / Да
Хотите использовать Turbopack для `next dev`? Нет / Да
Хотите настроить алиасы импортов (по умолчанию `@/*`)? Нет / Да
Какой алиас импорта вы хотите использовать? @/*

После ответов create-next-app создаст папку с именем вашего проекта и установит необходимые зависимости.

Ручная установка

Для ручного создания нового приложения Next.js установите необходимые пакеты:

Терминал

npm install next@latest react@latest react-dom@latest

Затем добавьте следующие скрипты в ваш файл package.json:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Эти скрипты соответствуют различным этапам разработки приложения:

next dev: Запускает сервер разработки.
next build: Собирает приложение для продакшена.
next start: Запускает продакшен-сервер.
next lint: Запускает ESLint.

Создание директории `pages`

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

Создайте директорию pages в корне вашего проекта. Затем добавьте файл index.tsx внутрь папки pages. Это будет ваша домашняя страница (/):

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

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>
  )
}

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Создание папки `public` (опционально)

Создайте папку public в корне вашего проекта для хранения статических ресурсов, таких как изображения, шрифты и т.д. Файлы внутри public можно затем ссылаться в вашем коде, начиная с базового URL (/).

Вы можете ссылаться на эти ресурсы, используя корневой путь (/). Например, public/profile.png можно ссылаться как /profile.png:

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

Запуск сервера разработки

Запустите npm run dev, чтобы запустить сервер разработки.
Откройте http://localhost:3000, чтобы увидеть ваше приложение.
Отредактируйте файл pages/index.tsx и сохраните его, чтобы увидеть обновлённый результат в браузере.

Настройка TypeScript

Минимальная версия TypeScript: v4.5.2

Next.js имеет встроенную поддержку TypeScript. Чтобы добавить TypeScript в ваш проект, переименуйте файл в .ts / .tsx и запустите next dev. Next.js автоматически установит необходимые зависимости и добавит файл tsconfig.json с рекомендуемыми настройками.

Подробнее см. на странице TypeScript.

Настройка ESLint

Next.js имеет встроенный ESLint. Он автоматически устанавливает необходимые пакеты и настраивает параметры при создании нового проекта с помощью create-next-app.

Чтобы вручную добавить ESLint в существующий проект, добавьте next lint как скрипт в package.json:

package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

Затем запустите npm run lint, и вам будет предложено пройти процесс установки и настройки.

Терминал

npm run lint

Вы увидите запрос:

? Как вы хотите настроить ESLint?

❯ Строгий (рекомендуется)
Базовый
Отмена

Строгий: Включает базовую конфигурацию ESLint от Next.js вместе с более строгим набором правил Core Web Vitals. Это рекомендуемая конфигурация для разработчиков, впервые настраивающих ESLint.
Базовый: Включает только базовую конфигурацию ESLint от Next.js.
Отмена: Пропустить настройку. Выберите этот вариант, если планируете настроить собственную конфигурацию ESLint.

Если выбраны Строгий или Базовый, Next.js автоматически установит eslint и eslint-config-next как зависимости в вашем приложении и создаст файл .eslintrc.json в корне вашего проекта с выбранной конфигурацией.

Теперь вы можете запускать next lint каждый раз, когда хотите проверить код с помощью ESLint. После настройки ESLint будет автоматически запускаться при каждой сборке (next build). Ошибки приведут к сбою сборки, а предупреждения — нет.

Подробнее см. на странице Плагин ESLint.

Настройка абсолютных импортов и алиасов путей модулей

Next.js имеет встроенную поддержку опций "paths" и "baseUrl" файлов tsconfig.json и jsconfig.json.

Эти опции позволяют создавать алиасы для директорий проекта в виде абсолютных путей, что делает импорт модулей проще и чище. Например:

// До
import { Button } from '../../../components/button'

// После
import { Button } from '@/components/button'

Чтобы настроить абсолютные импорты, добавьте опцию baseUrl в ваш файл tsconfig.json или jsconfig.json. Например:

tsconfig.json или jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

В дополнение к настройке пути baseUrl, вы можете использовать опцию "paths" для создания алиасов путей модулей.

Например, следующая конфигурация сопоставляет @/components/* с components/*:

tsconfig.json или jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

Каждый из "paths" указывается относительно расположения baseUrl.

Создание нового приложения Next.js

On this page