Как создать новый проект 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.

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

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

Создайте папку app. Затем внутри 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 и page.tsx будут отображаться, когда пользователь посетит корень вашего приложения (/).

Полезно знать:

Если вы забудете создать корневой макет, Next.js автоматически создаст этот файл при запуске сервера разработки с помощью next dev.

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

Создание папки `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, чтобы увидеть ваше приложение.
Отредактируйте файл app/page.tsx и сохраните его, чтобы увидеть обновлённый результат в браузере.

Настройка TypeScript

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

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

Плагин для IDE

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

Вы можете включить плагин в VS Code следующим образом:

Откройте палитру команд (Ctrl/⌘ + Shift + P)
Найдите "TypeScript: Select TypeScript Version"
Выберите "Use Workspace Version"

Подробнее см. на странице 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