JavaRush /Курсы /Модуль 3: React /Установка и настройка Next.js для SSR

Установка и настройка Next.js для SSR

Модуль 3: React

13 уровень , 3 лекция

Открыта

Начало работы с Next.js

Прежде чем мы начнём, убедитесь, что у вас установлен Node.js версии 12.22.0 или выше (без этого мы никак не можем, как без среды JavaScript). Если вы ещё не установили Node.js, загляните на официальный сайт Node.js, выберите LTS-версию и вперед.

Теперь давайте создадим наш первый проект. Next.js, как заботливый друг, предоставил нам удобный способ начала работы — команду create-next-app. Вспомните, как легко было запускать create-react-app, и расслабьтесь: здесь всё так же просто.

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

Запустите следующую команду в терминале:

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

Если вы вдруг не доверяете npx или просто хотите установить глобально, вот альтернатива:

npm install -g create-next-app
create-next-app my-next-ssr-project

Эта команда создаёт новый проект в папке my-next-ssr-project. Если вы хотите использовать Yarn вместо npm, то добавьте флаг --use-yarn:

npx create-next-app@latest my-next-ssr-project --use-yarn

Примечание: имя проекта my-next-ssr-project может быть любым. Дайте своему проекту имя, которое согреет вашу душу, например, ssr-magic.

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

cd my-next-ssr-project

И запустите приложение:

npm run dev

Откройте в браузере http://localhost:3000. Вы увидите приветственную страницу Next.js. Поздравляю! Теперь мы официально вступили в мир SSR.

Обзор структуры проекта Next.js

Как только проект создан, в корне вашего проекта появится следующая структура:

my-next-ssr-project/
├── node_modules/
├── public/
├── pages/
├── styles/
├── package.json
├── README.md
├── tsconfig.json (если вы выбрали TypeScript)

Разберём ключевые элементы:

pages/ — самый важный каталог. Здесь создаются страницы вашего приложения. Каждый файл в этой папке становится маршрутом. Например, файл pages/about.js будет доступен по пути /about.
public/ — сюда помещаются статические файлы, такие как изображения и шрифты. URL для доступа к ним будет /имя-файла.
styles/ — содержит стили вашего приложения. Вы можете удалить этот каталог или настроить его по своему усмотрению.
package.json — стандартный файл npm, который описывает зависимости проекта и его настройки.
tsconfig.json — файл конфигурации TypeScript (если вы выбрали TypeScript).

Если вы когда-либо работали с React, эта структура покажется знакомой. Next.js просто добавляет немного магии.

Первая страница с SSR в Next.js

Мы ещё не сделали ничего грандиозного, не так ли? Давайте создадим свою первую страницу и убедимся, что всё работает.

По умолчанию в папке pages/ есть файл index.js. Откроем его и посмотрим:

export default function Home() {
  return (
    <div>
      <h1>Добро пожаловать в мир SSR с Next.js!</h1>
      <p>Это ваша стартовая страница.</p>
    </div>
  );
}

Здесь определён базовый компонент, который возвращает HTML для отображения на главной странице (по маршруту /).

Попробуем создать свою страницу. В папке pages/ создайте файл about.js:

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Эта страница рассказывает про наш проект на SSR.</p>
    </div>
  );
}

Запустите сервер (если он ещё не работает) командой npm run dev и откройте http://localhost:3000/about. У вас всё получилось? Отлично! Теперь у нас есть страница /about.

Работа с CSS в Next.js

Теперь давайте добавим немного стиля, чтобы наши страницы выглядели не так скучно. В папке styles/ уже есть файл globals.css. Это файл для глобальных стилей.

Откройте styles/globals.css и добавьте стили:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1 {
  color: #0070f3;
}

Эти глобальные стили автоматически применяются ко всему приложению Next.js.

Подключение TypeScript

Как опытные разработчики, мы ни за что не забудем про TypeScript. Для этого наведём немного порядка и настроим проект.

Чтобы добавить поддержку TypeScript, выполните:

touch tsconfig.json
npm install --save-dev typescript @types/react @types/node

После этого запустите сервер снова, и Next.js автоматически настроит ваш tsconfig.json. Теперь вы можете использовать файлы с расширением .ts и .tsx.

Переименуем index.js в index.tsx и добавим типизацию:

type Props = {
  title: string;
};

export default function Home({ title }: Props) {
  return (
    <div>
      <h1>{title}</h1>
      <p>С TypeScript всё выглядит безопаснее, не так ли?</p>
    </div>
  );
}

Обновите страницу, и вы увидите типизированный результат. Cпасибо, TypeScript, за отсутствие багов (ну, почти).