Маршрутизация Next.js с "next-connect" для подмаршрутов

Question

В моем Next.js проект, я создал экспресс-лайк route->middleware->endpoint шаблон с использованием next-connect упаковка.

У меня такой шаблон маршрута:

      /api/tours 

/api/tours/:id

/api/tours/top-5-cheap

/api/tours/stats

/api/tours/monthly-plan
...

В моем файле pages / api / tours я добавил этот файл кода для захвата всех подмаршрутов. Согласно документам, это должно работать https://www.npmjs.com/package/next-connect

      import nc from 'next-connect'
const mainRoute = nc({ attachParams: true })

const subRoute1 = nc().use(mid1).get(endpoint1);
const subRoute2 = nc().use(mid2).use(mid3).post(endpoint2);
const subRoute3 = nc().use(mid4).use(mid5).use(mid6).get(endpoint4)
    
mainRoute
    .use("/top-5-cheap", subRoute1)
    .use("/stats", subRoute2)
    .use("/monthly-plan", subRoute3)
    .get((req, res) => { res.end("api/tours/sub-or-id") })

export default mainRoute

Но это дает page not found error Когда я перемещаю код в pages/api/tour/:tourIdон запускает метод get. Любые предложения или помощь приветствуются

Answer 1

Вы получаете 404: Page not foundошибка, потому что страница не существует. Методы маршрутизации Next.JS, означает, что api/tours/top-5-cheap пойду к /pages/api/top-5-cheap.js. А если его нет, возвращает ошибку.

Вот два моих возможных решения

• Создайте новый файл и заключите имя в скобки ( []) сделать это dynamic route.

      └── pages
    └── api
        └── tours
            ├── index.js
            └── [id].js

И используйте useRouter крючок или один из data-fetching методы, чтобы получить доступ к динамическому parameter

      // pages/api/tours/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  return <p>Post: {router.query.id}</p>
}

• вы используете страницу индекса и передаете подмаршрут как запрос

      const subRoute1 = nc().use(mid1).get((req, res) => { res.end("api/tours?id=top-5-cheap") });
...

mainRoute.use("/top-5-cheap", subRoute1).(...)

А также

      // pages/api/index.js
export default function (req, res) {
  // sub-route id will be passed in params object
  // const id = req.params.id // top-5-cheap; ...
  res.send(`Requested ${req.query.id} api page`)
}