Установка

Добро пожаловать в документацию Next.js!

Если у вас есть вопросы по поводу Next.js, вы всегда можете задать их нашему сообществу в обсуждениях GitHub.

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

• Node.js 10.13 или новее
• Поддерживаются MacOS, Windows (включая WSL) и Linux.

Настроить

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

  npx create-next-app
  # or
  yarn create next-app

После завершения установки следуйте инструкциям по запуску сервера разработки. Попробуйте отредактировать pages/index.js и посмотрите результат в своем браузере.

Для получения дополнительной информации о том, как использовать create-next-app, вы можете просмотреть в разделе Create Next App

Ручная настройка

Установить next, react и react-dom в вашем проекте:

  npm install next react react-dom
  # or
  yarn add next react react-dom

Откройте package.json и добавьте следующее scripts:

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

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

dev- Запускает next dev, Next.js в режиме разработки

build- Запускает next build, сборку приложения для производственного использования.

start- Запускает next start, производственный сервер Next.js

Next.js построен на концепции страниц. Страница представляет собой React Component экспортированный из .js, .jsx, .ts или .tsx файла в pages каталоге.

Страницы связаны с маршрутом на основе имени файла. Например pages/about.js, отображается на /about. Вы даже можете добавить параметры динамического маршрута с именем файла.

Создайте pages каталог внутри вашего проекта.

Заполните ./pages/index.js следующим содержанием:

function HomePage() {
    return <div>Welcome to Next.js!</div>
}
export default HomePage

Чтобы начать разработку вашего приложения, запустите npm run dev или yarn dev. Это запустит сервер разработки http://localhost:3000.

Посетите, http://localhost:3000 чтобы просмотреть ваше приложение.

Итак, получаем:

- Автоматическая компиляция и комплектация (с webpack и babel)

- Быстрое реагирование на обновления

- Статическая генерация и рендеринг на стороне сервера ./pages/

- Раздача статических файлов. ./public/ отображается на /

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