deno.com
本页内容

构建 Next.js 应用

Next.js 是一个流行的框架，用于构建服务器端渲染的应用程序。它构建于 React 之上，并提供了许多开箱即用的功能。

在本教程中，我们将构建一个简单的 Next.js 应用程序，并使用 Deno 运行它。该应用程序将显示恐龙列表。当您点击其中一个时，它将带您进入包含更多详细信息的恐龙页面。

demo of the app

首先，验证您是否安装了最新版本的 Deno，您至少需要 Deno 1.46.0

deno --version

使用 Deno 创建 Next.js 应用 跳转到标题

Next 提供了一个 CLI 工具来快速搭建新的 Next.js 应用程序。在您的终端中运行以下命令以使用 Deno 创建新的 Next.js 应用程序

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

当出现提示时，选择默认选项以使用 TypeScript 创建新的 Next.js 应用程序。

然后，cd 进入新创建的项目文件夹并运行以下命令来安装依赖项

deno install

Next.js 有一些依赖项仍然依赖于 Object.prototype.__proto__，因此您需要允许它。在一个新的 deno.json 文件中，添加以下行

{
  "unstable": ["unsafe-proto"]
}

现在您可以启动您的新 Next.js 应用程序了

deno task dev

这将启动 Next.js 服务器，点击输出链接到 localhost 以在浏览器中查看您的应用程序。

添加后端 跳转到标题

下一步是添加后端 API。我们将创建一个非常简单的 API，返回有关恐龙的信息。

我们将使用 Next.js 的 内置 API 路由处理程序 来设置我们的恐龙 API。Next.js 使用基于文件系统的路由器，其中文件夹结构直接定义路由。

我们将定义三个路由。第一个路由在 /api 将返回字符串 Welcome to the dinosaur API，然后我们将设置 /api/dinosaurs 以返回所有恐龙，最后设置 /api/dinosaur/[dinosaur] 以根据 URL 中的名称返回特定的恐龙。

/api/ 跳转到标题

在您的新项目的 app 文件夹中，创建一个 api 文件夹。在该文件夹中，创建一个 route.ts 文件，该文件将处理对 `/api/.` 的请求。

将以下代码复制并粘贴到 api/route.ts 文件中

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 文件中。

在 dinosaurs 目录中创建一个 route.ts 文件，该文件将处理对 /api/dinosaurs 的请求。在此路由中，我们将读取 data.json 文件并将恐龙作为 JSON 返回

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

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

/api/dinosaurs/[dinosaur] 跳转到标题

对于最后一个路由 /api/dinosaurs/[dinosaur]，我们将在 dinosaurs 目录中创建一个名为 [dinosaur] 的文件夹。在其中创建一个 route.ts 文件。在此文件中，我们将读取 data.json 文件，找到 URL 中名称的恐龙，并将其作为 JSON 返回

route.ts
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 文件并添加以下代码

types.ts
export type Dino = { name: string; description: string };

更新主页 跳转到标题

我们将更新 app 目录中的 page.tsx 文件，以从我们的 API 获取恐龙数据并将其显示为链接列表。

要在 Next.js 中执行客户端代码，我们需要在文件顶部使用 "use client" 指令。然后，我们将导入此页面中需要的模块，并导出将渲染页面的默认函数

page.tsx
"use client";

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

export default function Home() {
}

在 Home 函数的主体内部，我们将定义一个状态变量来存储恐龙数据，以及一个 useEffect 钩子，以便在组件挂载时从 API 获取数据

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

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

在此之下，仍然在 Home 函数的主体内部，我们将返回一个链接列表，每个链接都链接到恐龙的页面

page.tsx
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 获取特定恐龙的详细信息并在页面上渲染它们。

与主页非常相似，我们将需要客户端代码，并且我们将导入所需的模块并导出一个默认函数。我们将传入的参数传递给该函数，并为此参数设置一个类型

[dinosaur]/page.tsx
"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 获取数据

[dinosaur]/page.tsx
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 函数主体内部，我们将返回一个段落元素，其中包含恐龙的名称和描述

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

运行应用 跳转到标题

现在您可以使用 deno task dev 运行该应用程序，并在浏览器中访问 http://localhost:3000 以查看恐龙列表。点击恐龙以查看更多详细信息！

demo of the app

🦕 现在您可以使用 Deno 构建和运行 Next.js 应用程序了！为了在您的应用程序的基础上进行构建，您可以考虑添加数据库以替换您的 data.json 文件，或者考虑编写一些测试以使您的应用程序可靠并为生产做好准备。

您找到所需的内容了吗？

编辑此页面
隐私政策