简介

本文中使用的所有示例都在此存储库中。

将介绍以下内容：

• 单元测试 Next.js API GET 路由
• 单元测试 Next.js API POST/PUT/DELETE 路由

单元测试 Next.js GET 路由

📁app/api/items/route.ts:

1
2
3
4
5
6
7
8
9

import { NextResponse } from 'next/server';

export async function GET() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ];
  return NextResponse.json(items, { status: 200 });
}

这是一个简单的 GET 端点，它将返回一些项目的 json 对象。在您的情况下，这可能会从数据库或其他一些 API 调用获取数据，然后将其返回给客户端。本文的最后一个示例将介绍这一点。也就是说，让我们看看这个测试会是什么样子：

背景

Jest 和 React 测试库经常一起用于单元测试和快照测试。本指南将向您展示如何使用 Next.js 设置 Jest 并编写您的第一个测试。

快速开始

您可以将 create-next-app 与 Next.js with-jest 示例结合使用来快速入门：

1

npx create-next-app@latest --example with-jest with-jest-app

手动设置

要设置 Jest，请安装 jest 和以下软件包作为开发依赖项：

1

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

通过运行以下命令生成基本的 Jest 配置文件：

1

npm init jest@latest

背景

最近看到一个很棒的视频教程，从0开的搭建一个类似Twitter的应用，用到了 React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel 等技术，都是最近比较流行的技术
视频地址

学习过程

一开始学习时遇到不少困难，比如Next的版本和视频不一样，MongoDB不好用，非Get的环境拿不到Session等，最后都被我克服了，换用了mysql和一些方法，实现了类似效果。
后来我又根据最新的NextJS版本，重新自己写了一个，放到了Github上，并部署到了Vercel。果然很简单。

GitHub地址

最新可以运行的程序源码： link

推荐一下 Josh Comeau 的经典三篇教程，我有搞不懂的属性经常拿出来看看，常看常新，我认为是最好的交互式教程，比MDN等都要好，可以按顺序阅读：

• Flexbox 交互式指南：link
• CSS Grid 交互式指南：link
• CSS 居中终极指南：link

看了这三篇对于现代 CSS 最关键的知识点之一：布局就几乎搞定了。

背景

不用到处找基于 Cloudflare 服务的开源工具了，来看看这个超赞列表，我看里面已经收集不少的免费项目。
Awesome Cloudflare - 为白嫖 Cloudflare 提供一个省心省时的资源工具清单。

awesome-cloudflare

介绍

选几个我感兴趣的介绍一下：

• 免费图床 cf-image-hosting ：在 Telegraph 上免费无限制地托管图像，部署在 Cloudflare 上。试用地址：https://images.mingming.dev
• 网站分析 analytics_with_cloudflare ：免费开源网页访客计数器, Webviso 是一个基于Cloudflare worker服务+Cloudflare D1数据库实现的完全免费的在线web访客统计服务。 功能与目前常用的 不蒜子 - 极简网页计数器 相同。Webviso完全开源，你可以实现自定义需求。 基于Cloudflare的微服务架构可快速自行部署上线。
• 免费Workers： Cloudflare Workers优秀项目收集。

Add Notification Function

1. Add Alert to SideBarItem Component
2. Add Alert to SideBar Component
3. Add Notification API
4. Add Hook
5. Add Notification Page
6. Add notification content in Like API
7. Add notification content in Comments API
8. Add notification content in Follow API

Add Comments Function

1. Add Comments API
2. Modify Form Component
3. Modify Post page
4. Add CommentFeed Component
5. Add CommentItem Component

Add Like Function

1. Add Like API
2. Add Hooks
3. Modify PostItem Page

Add Post Page

1. Add Post API
2. Add Hooks
3. Add Post Page

Add Follow Function

1. Add Follow API
2. Add hook
3. Modify component UserBio