NextJS如何创建动态后端路由实现随机ID图片访问路径

你查到的getStaticPaths是静态生成场景的专用API，不需要预声明ID的动态路由可以按Next.js两种常用路由模式分别实现：

如果你使用 Pages Router （pages目录结构） #

• 在pages目录下创建命名为[id].js/[id].ts的文件，即可匹配根路径下的任意一级动态参数
• 使用getServerSideProps方法跳过静态生成逻辑，每次用户访问时都会在服务端实时执行请求处理：

// pages/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params
  // 在这里执行数据库查询，校验id是否存在
  const image = await db.query('SELECT * FROM images WHERE id = ?', [id])
  
  if (!image) {
    // 图片不存在返回404
    return { notFound: true }
  }
  
  // 校验通过后直接返回图片流
  context.res.setHeader('Content-Type', image.content_type)
  context.res.send(image.buffer)
  
  // 不需要返回页面props时可直接结束响应，无需执行下方return
  return { props: {} }
}

// 不需要前端渲染页面的情况下可以直接导出空组件
export default function ImagePage() {
  return null
}

如果你使用 App Router （app目录结构，Next.js 13+） #

• 在app目录下创建[id]文件夹，内部新建route.js/route.ts文件作为动态后端路由入口：

// app/[id]/route.js
import { NextResponse } from 'next/server'
import db from '@/lib/db'

export async function GET(request, { params }) {
  const { id } = params
  // 执行数据库查询逻辑
  const image = await db.query('SELECT * FROM images WHERE id = ?', [id])
  
  if (!image) {
    return new NextResponse(null, { status: 404 })
  }
  
  // 返回图片响应
  return new NextResponse(image.buffer, {
    headers: {
      'Content-Type': image.content_type
    }
  })
}

以上两种方案都不需要提前声明所有可能的ID，每次用户访问时都会实时触发服务端逻辑，完全匹配图床场景的动态ID访问需求。

内容的提问来源于stack exchange，提问作者Tyrao