Установка Next.js

Прежде чем начать, убедитесь, что у вас установлены Node.js и npm. Вы можете проверить, установлены ли они, с помощью следующих команд:

node -v
npm -v

Если ваша система пока не поддерживает Node.js и NPM, вы можете обратиться к нашемуучебнику по Node.js。

Использование npm в Китае очень медленное. Вы можете использовать настроенный для Taobao инструмент командной строки cnpm (с поддержкой сжатия gzip) вместо стандартного npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Затем вы можете использовать команду cnpm для установки модулей:

$ cnpm install [name]

Для получения дополнительной информации, пожалуйста, обратитесь к:http://npm.taobao.org/。

Используйте create-react-app для быстрого создания среды разработки Next.js

Next.js предоставляет официальный инструмент для создания каркаса проекта, create-next-app, для быстрой настройки проекта.

create-react-app — проект от Facebook. С помощью этой команды мы можем быстро создать среду разработки Next.js без конфигурации.

Проект, автоматически создаваемый create-react-app, основан на Webpack + ES6.

Выполните следующую команду, чтобы создать проект:

npx create-next-app@latest my-next-app

Во время установки вы увидите следующие подсказки. Просто нажимайте Enter до конца:

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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

    npx — это инструмент Node.js для запуска исполняемых файлов из пакетов без их глобальной установки.

  • Используйтеcreate-next-appинструмент скаффолдинга для создания нового проекта Next.js.
  • my-next-app— это название проекта. При необходимости вы можете изменить его на любое другое название.
  • Он автоматически установит зависимости, необходимые проекту.

После выполнения этой команды create-next-app автоматически выполнит следующие операции:

  • Создать папку с именем my-next-app.
  • Инициализировать проект и установить необходимые зависимости.
  • Создать базовую структуру проекта, включая папку app, папку public, файл package.json и т. д.

После завершения создания перейдите в каталог проекта:

cd my-next-app

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

npm run dev

Или, если вы используете yarn:

yarn dev

Сервер разработки по умолчанию работает наhttp://localhost:3000, откройте браузер и перейдите по адресу http://localhost:3000, вы должны увидеть стандартную приветственную страницу Next.js.

Мы можем изменить файл page.tsx в каталоге app. Изменённый код:

app/page.tsx

export default function Home() {
    return <div>Привет, Мир!</div>;
}

Посетите http://localhost:3000, результат отображается следующим образом:

Hello, World!

Установка Next.js вручную

Чтобы вручную создать новое приложение Next.js, сначала установите необходимые пакеты:

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

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

Файл package.json:

{
  "scripts": {
    "dev": "next dev",        // Запуск Next.js в режиме разработки
    "build": "next build",    // Сборка приложения для использования в продакшене
    "start": "next start",    // Запуск продакшен-сервера Next.js
    "lint": "next lint"       // Настройка встроенного ESLint в Next.js
  }
}

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

  • dev: запускnext dev, который запускает Next.js в режиме разработки.
  • build: запускnext build, который собирает приложение для продакшена.
  • start: запускnext start, который запускает продакшен-сервер Next.js.
  • lint: запускnext lint, который настраивает встроенную конфигурацию ESLint в Next.js.

Создайте каталог app

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

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

Создайте корневой файл layout

Вapp/layout.tsxсоздайте в нем корневой файл layout, включая необходимые<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), автоматически создаст этот файл.
  • При необходимости вы можете использовать в корневом каталоге проектаsrcкаталог, чтобы отделить код приложения от файлов конфигурации.

Создайте папку public (необязательно)

При необходимости вы можете создатьpublicпапку в корневом каталоге проекта для хранения статических ресурсов, таких как изображения, шрифты и т. д.publicК файлам в папке можно обращаться через/путь.

На этом этапе вы завершили ручную установку и инициализацию базовой структуры проекта Next.js.

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

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

npm run dev

Откройте http://localhost:3000, чтобы просмотреть приложение.

Отредактируйтеapp/page.tsxфайл и сохраните его, после чего вы увидите обновлённый результат в браузере.

Другие расширения