Создайте приложение Next.js

Next.js — популярный фреймворк для создания серверно-стороннях приложений. Он построен на основе React и предоставляет множество функций «из коробки».

В этом руководстве мы создадим простое приложение Next.js и запустим его с помощью Deno. Приложение будет отображать список динозавров. При нажатии на одного из них вы перейдете на страницу динозавра с дополнительными подробностями.

Начните с проверки, установлена ли у вас последняя версия Deno, вам потребуется как минимум Deno 1.46.0:

deno --version

Создайте приложение Next.js с Deno

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

deno run -A npm:create-next-app@latest

При появлении запроса выберите стандартные параметры для создания нового приложения Next.js с TypeScript.

Затем, cd в созданную папку проекта и выполните следующую команду для установки зависимостей

deno install

Теперь вы можете запустить ваше новое приложение Next.js:

deno task dev

Это запустит сервер Next.js, перейдите по ссылке в выводе на localhost, чтобы увидеть ваше приложение в браузере.

Добавить бэкэнд

Следующим шагом является добавление бэкэнд API. Мы создадим очень простой API, возвращающий информацию о динозаврах.

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

Мы определим три маршрута: Первый маршрут по /api вернет строку Welcome to the dinosaur API, затем мы настроим /api/dinosaurs для возврата всех динозавров, и, наконец, /api/dinosaur/[dinosaur] для возврата конкретного динозавра на основе имени в URL.

/api/

В папке app вашего нового проекта создайте папку api. В этой папке создайте файл route.ts, который будет обрабатывать запросы к `/api/.

Скопируйте и вставьте следующий код в файл api/route.ts:

export async function GET() {
  return Response.json("welcome to the dinosaur API");
}

Этот код определяет простой обработчик маршрутов, который возвращает JSON-ответ со строкой welcome to the dinosaur API.

/api/dinosaurs

В папке api создайте папку dinosaurs. В этой папке создайте файл data.json, который будет содержать данные динозавров, закодированные жестко. Скопируйте и вставьте этот JSON-файл в файл data.json.

Создайте файл route.ts в каталоге dinosaurs, который будет обрабатывать запросы к /api/dinosaurs. В этом маршруте мы будем читать файл data.json и возвращать динозавров в формате JSON:

import data from "./data.json" with { type: "json" };

export async function GET() {
  return Response.json(data);
}

/api/dinosaurs/[dinosaur]

И для последнего маршрута, /api/dinosaurs/[dinosaur], мы создадим папку [dinosaur] в каталоге dinosaurs. В ней создайте файл route.ts. В этом файле мы будем читать файл data.json, искать динозавра с именем в URL и возвращать его в формате JSON:

import { NextRequest } from "next/server";
import data from "../data.json" with { type: "json" };

type RouteParams = { params: Promise<{ dinosaur: string }> };

export const GET = async (request: NextRequest, { params }: RouteParams) => {
  const { dinosaur } = await params;

  if (!dinosaur) {
    return Response.json("No dinosaur name provided.");
  }

  const dinosaurData = data.find((item) =>
    item.name.toLowerCase() === dinosaur.toLowerCase()
  );

  return Response.json(dinosaurData ? dinosaurData : "No dinosaur found.");
};

Теперь, если вы запустите приложение с deno task dev и перейдете по ссылке http://localhost:3000/api/dinosaurs/brachiosaurus в вашем браузере, вы должны увидеть подробности динозавра брахиозавр.

Создать фронтенд

Теперь, когда наш бэкэнд API настроен, давайте создадим фронтенд для отображения данных динозавров.

Определите тип динозавра

Сначала мы создадим новый тип, чтобы определить форму данных динозавров. В каталоге app создайте файл types.ts и добавьте следующий код:

export type Dino = { name: string; description: string };

Обновите главную страницу

Мы обновим файл page.tsx в каталоге app для получения данных динозавров из нашего API и отображения их как списка ссылок.

Для выполнения кода на стороне клиента в Next.js нам необходимо использовать директиву use Client в верхней части файла. Затем мы импортируем необходимые модули на этой странице и экспортируем функцию по умолчанию, которая будет отображать страницу:

"use client";

import { useEffect, useState } from "react";
import { Dino } from "./types";
import Link from "next/link";

export default function Home() {
}

Внутри тела функции Home, мы определим переменную состояния для хранения данных о динозаврах и хук useEffect для извлечения данных из API при подключении компонента:

const [dinosaurs, setDinosaurs] = useState<Dino[]>([]);

useEffect(() => {
  (async () => {
    const response = await fetch(`/api/dinosaurs`);
    const allDinosaurs = await response.json() as Dino[];
    setDinosaurs(allDinosaurs);
  })();
}, []);

Ниже этого, все еще внутри тела функции Home , мы вернем список ссылок, каждая из которых ведет на страницу динозавра:

return (
  <main><h1>Welcome to the Dinosaur app</h1><p>Click on a dinosaur below to learn more.</p><ul>{dinosaurs.map((dinosaur: Dino) => {
        return (
          <li key={dinosaur.name}><Link href={`/${dinosaur.name.toLowerCase()}`}>{dinosaur.name}</Link></li>
        );
      })}</ul></main>
);

Создайте страницу динозавра

Внутри каталога app создайте новую папку [dinosaur]. Внутри этой папки создайте файл page.tsx. Этот файл получит подробности определенного динозавра из API и отобразит их на странице.

Подобно главной странице, нам понадобится код на стороне клиента, и мы импортируем необходимые модули и экспортируем функцию по умолчанию. Мы передадим входящие данные в функцию и настроим тип для этого параметра:

"use client";

import { useEffect, useState } from "react";
import { Dino } from "../types";
import Link from "next/link";

type RouteParams = { params: Promise<{ dinosaur: string }> };

export default function Dinosaur({ params }: RouteParams) {
}

Внутри тела функции Dinosaur мы получим выбранного динозавра из запроса, настроим переменную состояния для хранения данных о динозавре и напишем хук useEffect для получения данных из API при подключении компонента:

const selectedDinosaur = params.then((params) => params.dinosaur);
const [dinosaur, setDino] = useState<Dino>({ name: "", description: "" });

useEffect(() => {
  (async () => {
    const resp = await fetch(`/api/dinosaurs/${await selectedDinosaur}`);
    const dino = await resp.json() as Dino;
    setDino(dino);
  })();
}, []);

Наконец, все еще внутри тела функции Dinosaur, мы вернем элемент абзаца, содержащий имя и описание динозавра:

return (
  <main><h1>{dinosaur.name}</h1><p>{dinosaur.description}</p><Link href="/">🠠 Back to all dinosaurs</Link></main>
);

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

Теперь вы можете запустить приложение с deno task dev и перейти по ссылке http://localhost:3000 в вашем браузере, чтобы увидеть список динозавров. Нажмите на динозавра, чтобы увидеть больше деталей!

🦕 Теперь вы можете создавать и запускать приложение Next.js с Deno! Для расширения вашего приложения вы можете рассмотреть добавление базы данных для замены вашего файла data.json или написать некоторые тесты, чтобы сделать ваше приложение надежным и готовым к работе в производстве.