🔶 1. Создание Next.js приложения, базовый роутинг

Next.js - это Fullstack Framework. Он использует знакомый React "под капотом" и позволяет настраивать SEO оптимизацию для веб-сайтов и приложений.

Создание приложения

Для начала работы необходимо создать приложение на Next.js

Найти команду установки: зайдите в документацию Next.js, откройте Get started, затем Installation. Команда находится в разделе Create with the CLI.

Next.js installation

Выполнение команды: скопируйте команду и введите ее в терминале (к примеру в WebStorm) в нужной папке.
Настройка при установке: при установке введите название проекта, выберите параметры, например:

использовать TypeScript (yes)
использовать линтер (ESLint)
использовать tailwind CSS (по желанию)
SRC directory (по желанию)
App router (yes)
использовать Turbopack (yes)
использовать импорт алиас (yes)

Terminal

Would you like to use TypeScript? No / Yes
Which linter would you like to use? ESLint / Biome / None
Would you like to use React Compiler? 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 customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

После завершения установки можно начинать работу с проектом.

Структура Next.js проекта

При создании проекта автоматически формируются несколько папок и файлов.

Ключевые папки:

/public/: предназначена для хранения картинок, SVG-шек, PNG-шек и других файлов, которые будут импортироваться в проекте.
/src/: знакома разработчикам, которые работали с React, но в Next.js является необязательной.
/app/: очень важная папка (внутри src, если SRC directory установлена), где происходит вся магия роутинга Next.js.

- favicon.ico
- globals.css
- layout.tsx
- page.module.css
- page.tsx

Основы App Router

Все файлы, находящиеся в папке /app/, являются роутинговыми файлами. Их поведение и задачи определяются их зарезервированными названиями.

Ключевые файлы в папке app:

page.tsx (или page.jsx): содержит обычный React компонент, который отвечает за отрисовку страницы.
page.module.css: файл, содержащий стили для соответствующей страницы.
layout.tsx: файл с зарезервированным названием, который отвечает за отрисовку layout (шаблона) для определенного количества страниц.

Layout — это компонент-обертка, который оборачивает дочерние элементы (child) и отрисовывает одинаковую разметку или выполняет одинаковую логику для разных страниц.

layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
    </html>
  )
}

App Router в Next.js дает возможность хранить в папке /app/ не только файлы страниц, что было невозможным в Page Router.

Запуск и базовый роутинг

Приложение можно запустить, используя скрипт dev в package.json. Приложение будет доступно по ссылке localhost:3000.

Маршрут по умолчанию - /.

По адресу / отображается контент, определенный в файле page.tsx (который находится в корне app или src/app).

Создание новых маршрутов

Для создания роутинга по новому адресу (например, /hello) необходимо создать новую директорию (папку) с требуемым названием.

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

page Hello

page.tsx

import styles from "../page.module.css"
 
export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>Hello</main>
    </div>
  )
}

Принцип App Router

Роутинг определяется названием директории. Если внутри директории есть файл page.tsx с дефолтным экспортом компонента, этот компонент будет отображаться по тому маршруту, который соответствует названию папки.

Пример: Если папку hello переименовать в test, страница будет открываться по адресу /test, независимо от названия компонента внутри page.tsx.

Теперь вы знаете, как создать приложение Next.js и как создавать в нем страницы с помощью базового роутинга🚀.