web全栈框架next.js 使用api功能发送文件及多级路由 & useSwr

场景
在next中使用three.js 解析模型时 loader需要传入模型地址 但是next导入的模型文件直>接解析了 遂尝试 next的服务端功能 返回项目文件

一级

page/api/glb.ts

import type { NextApiRequest, NextApiResponse } from "next";
import path from "path";
import fs from "fs";

/**
 * 返回模型文件 .glb
 */
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { name } = req.query;
  if (!name) res.status(500).send("未提供name字段");
  const filePath = path.resolve("./public/model", name as string);
  const stat = fs.statSync(filePath);

  res.writeHead(200, {
    "Content-Type": "application/octet-stream",
    "Content-Length": stat.size,
  });

  const readStream = fs.createReadStream(filePath);
  readStream.pipe(res);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

参考
send-file-as-response-using-nextjs-api

还有另一种方法

/*
Project structure:
├── images_folder
│   └── next.jpg
├── package.json
├── pages
│   ├── api
│   │   └── image.js
│   └── index.js
├── README.md
└── yarn.lock
*/

// pages/api/image.js

import fs from 'fs'
import path from 'path'

const filePath = path.resolve('.', 'images_folder/next.jpg')
const imageBuffer = fs.readFileSync(filePath)

export default function(req, res) {
  res.setHeader('Content-Type', 'image/jpg')
  res.send(imageBuffer)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

多级

page/api/draco/[name].ts

/*
 * @Author: hongbin
 * @Date: 2022-09-05 20:36:00
 * @LastEditors: hongbin
 * @LastEditTime: 2022-09-05 20:48:29
 * @Description: 返回 draco 文件 供解析glb模型使用
 */
import type { NextApiRequest, NextApiResponse } from "next";
import path from "path";
import fs from "fs";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const {
    query: { name },
  } = req;

  const filePath = path.resolve("./public/draco", name as string);
  const stat = fs.statSync(filePath);

  res.writeHead(200, {
    "Content-Type": "application/octet-stream",
    "Content-Length": stat.size,
  });

  const readStream = fs.createReadStream(filePath);
  readStream.pipe(res);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

官方案例
在组件中使用useSWR发起请求

import type { User } from '../interfaces'
import useSwr from 'swr'
import Link from 'next/link'

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function Index() {
  const { data, error } = useSwr<User[]>('/api/users', fetcher)

  if (error) return <div>Failed to load users</div>
  if (!data) return <div>Loading...</div>

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>
          <Link href="/user/[id]" as={`/user/${user.id}`}>
            {`User ${user.id}`}
          </Link>
        </li>
      ))}
    </ul>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24