Начало работы

Создание нового проекта

Мы рекомендуем использовать pnpm в качестве менеджера пакетов, так как он быстрее и эффективнее, чем npm или yarn. Если у вас не установлен pnpm, вы можете установить его глобально, выполнив команду:

npm install -g pnpm

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

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

Эта команда использует create-next-app — инструмент командной строки (CLI), который настраивает приложение Next.js за вас. В приведённой выше команде также используется флаг --example с стартовым примером для этого курса.

Изучение проекта

В отличие от учебных пособий, где вам предлагается писать код с нуля, большая часть кода для этого курса уже написана. Это лучше отражает реальную разработку, где вы, скорее всего, будете работать с существующей кодовой базой.

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

После установки откройте проект в вашем редакторе кода и перейдите в папку nextjs-dashboard.

cd nextjs-dashboard

Давайте потратим некоторое время на изучение проекта.

Структура папок

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

• /app: Содержит все маршруты, компоненты и логику вашего приложения. Здесь вы будете работать в основном.
• /app/lib: Содержит функции, используемые в вашем приложении, такие как повторно используемые утилиты и функции для получения данных.
• /app/ui: Содержит все UI-компоненты вашего приложения, такие как карточки, таблицы и формы. Чтобы сэкономить время, мы заранее стилизовали эти компоненты для вас.
• /public: Содержит все статические ресурсы вашего приложения, такие как изображения.
• Конфигурационные файлы: Вы также заметите конфигурационные файлы, такие как next.config.ts, в корне вашего приложения. Большинство этих файлов создаются и предварительно настраиваются при запуске нового проекта с помощью create-next-app. В этом курсе вам не нужно будет их изменять.

Не стесняйтесь исследовать эти папки и не беспокойтесь, если вы пока не понимаете, что делает весь код.

Тестовые данные

При создании пользовательских интерфейсов полезно иметь тестовые данные. Если база данных или API ещё не доступны, вы можете:

• Использовать тестовые данные в формате JSON или в виде объектов JavaScript.
• Использовать сторонние сервисы, такие как mockAPI.

Для этого проекта мы предоставили тестовые данные в файле app/lib/placeholder-data.ts. Каждый объект JavaScript в файле представляет таблицу в вашей базе данных. Например, для таблицы счетов:

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

В главе про настройку базы данных вы используете эти данные для заполнения вашей базы данных (наполнения её начальными данными).

TypeScript

Вы также можете заметить, что большинство файлов имеют расширение .ts или .tsx. Это потому, что проект написан на TypeScript. Мы хотели создать курс, отражающий современные тенденции веб-разработки.

Если вы не знаете TypeScript — это нормально. Мы будем предоставлять фрагменты кода на TypeScript, когда это потребуется.

А пока взгляните на файл /app/lib/definitions.ts. Здесь мы вручную определяем типы, которые будут возвращаться из базы данных. Например, для таблицы счетов определены следующие типы:

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // В TypeScript это называется объединённым строковым типом.
  // Это означает, что свойство "status" может быть только одной из двух строк: 'pending' или 'paid'.
  status: 'pending' | 'paid';
};

Используя TypeScript, вы можете быть уверены, что случайно не передадите неверный формат данных в ваши компоненты или базу данных, например, передав string вместо number для суммы счёта.

Если вы разработчик TypeScript:

• Мы вручную объявляем типы данных, но для лучшей типобезопасности рекомендуем Prisma или Drizzle, которые автоматически генерируют типы на основе схемы базы данных.
• Next.js определяет, использует ли ваш проект TypeScript, и автоматически устанавливает необходимые пакеты и конфигурацию. Next.js также поставляется с плагином TypeScript для вашего редактора кода, чтобы помочь с автодополнением и типобезопасностью.

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

Выполните pnpm i для установки пакетов проекта.

pnpm i

Затем выполните pnpm dev для запуска сервера разработки.

pnpm dev

pnpm dev запускает сервер разработки Next.js на порту 3000. Давайте проверим, работает ли он.

Откройте http://localhost:3000 в вашем браузере. Ваша домашняя страница должна выглядеть так (она намеренно не стилизована):