Разработка лендингов, квизов
сайтов, web-приложений

Next.js туториал - Урок №1 Несколько простых шагов для того, чтобы начать применять Next.js

Для того, чтобы начать применять next.js в своих разработках, необходимо выполнить несколько простых действий:

1. Установить Node.js

Взять его можно на официальном сайте. Скачиваем и устанавливаем в зависимости от нужной вам операционной системы. Думаю, тут все просто. С этим разберетесь.

2. Установить npm-модули next, react и react-dom

Для тех, кто не знает как устанавливать npm-модули, для начала лучше разобраться со всей эко-системой node.js. Ознакомиться с ней можно как на официальном сайте, так и, например на хабре. Этому посвящен целый хаб.

Затем в командной строке, создаем файл package.json с настройками по умолчанию:

npm init -y

Устанавливаем модули npm - next,react и react-dom. Для этого в командной строке вводим следующую команду. Для чего нужны каждый из этих модулей рассмотрим в следующих уроках.

npm install --save next react react-dom

3. Добавить скрипты для запуска nextjs в файл package.json

Добавляем скрипты для запуска nextjs в блок scripts в файле package.json

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

После этого файловая система становится основным API. Каждый .js-файл файл становится маршрутом, который обрабатывается и рендерится автоматически.

4. Создать стартовую страницу

Создадим файл './pages/index.js' и добавим туда следующий код:

export default () => <div>Welcome to next.js!</div>

5. Запустить наше приложение

После того как файл index.js готов, можно запустить наше приложение командой:

npm run dev

Мы увидим как приложение начнет компилироваться. После этого, по-умолчанию оно станет доступным по адресу http://localhost:3000:

Для того, чтобы запустить его на другом порту, нужно запустить команду:

npm run dev -- -p <номер порта>

Это все что необходимо сделать для сборки первого приложения. Таким образом, мы из коробки получаем:

  • Автоматическую транспиляцию и сборку (с webpack и babel);
  • "Горячую" перезагрузку кода;
  • Серверный рендеринг и индексацию './pages';
  • Выдачу статических файлов из директории './static/'.
  • next.js
  • фреймворк
  • туториал