使用 Next.js + Remult 创建一个待办事项(一)

Remult 是一个全栈 CRUD 框架，它使用 TypeScript 实体作为 API，可以很好地支持 Next.js。
通过写一个 todolist，来学习下 Remult。

第一步

创建一个 Next.js 项目。

1 2	npx -y create-next-app@latest remult-nextjs-todo --typescript cd remult-nextjs-todo

安装 Remult

1	npm i remult

第二步

打开 IDE。

创建一个 src 以项目根目录命名的文件夹。

server 在 src 文件夹中创建一个名为的文件夹

使用以下代码在文件夹 api.ts 中创建一个文件：src/server

// src/server/api.ts

import { createRemultServer } from "remult/server";
export const api = createRemultServer({});

[…remult].ts 在文件夹中添加一个名为 pages/api. 此文件是一个“捕获所有” Next.jsAPI 路由，将用于处理所有 API 请求。

// pages/api/[...remult].ts

import { NextApiRequest, NextApiResponse } from 'next'
import { api } from '../../src/server/api';

const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
    await api.handle(_req, res);
}

export default handler

启用 TypeScript 装饰器

将以下条目添加到文件的 compilerOptions 部分 tsconfig.json 以启用在 React 应用程序中使用装饰器。

// tsconfig.json

"experimentalDecorators": true,
"emitDecoratorMetadata": true

启动应用

1	npm run dev

基础的配置已经搭建好了，可以看到默认的 nextjs 页面。