Как в NextJs создать систему маршрутизации, похожую на stackoverflow?

Question

Я хочу, чтобы маршруты работали таким образом, чтобы:

• Посещениеwww.example.com/blog/12345следует перенаправить на .
• Посещениеwww.example.com/blog/12345/this-a-some-random-text-blahblahblahтакже следует перенаправить на .
• Посещениеwww.example.com/blog/12345/this-a-some-random-text-blahblahb/test/having-funдолжна быть ошибка 404.

Правильный блог всегда извлекается с помощью , а заголовок блога устанавливается в качестве второго параметра в URI на основе полученных данных.

Прямо сейчас по этому маршруту:www.example.com/blog/12345/this-is-a-testУ меня есть эта структура папок вapp/каталог:

      app/
  blog/
    [id]/
      [title]/
        page.tsx

Изblog/[id]/[title]/page.tsxфайл, у меня есть доступ как к файлам, так и к файлам . Используя , я могу получить и отобразить некоторые данные. Нет проблем, мне не нужно использовать . Это предназначено для целей SEO, и я хочу иметь возможность изменитьtitleв URI к фактическому заголовку ресурса после получения с помощьюid.

Как мне этого добиться? Возможно, мне придется изменить структуру папок, но я не уверен.

Answer 1

Что-то вроде этого должно работать:

      import { redirect } from 'next/navigation'

export default function Page({ params }: { params: { id: string; title: string } }) {

  const expectedTitle = getTitleFromId(params.id) // get this from your db or whatever

  if (expectedTitle !== params.title) {
    redirect(`/blog/${params.id}/${expectedTitle}`)
  }

  return <div>My Post: {params.title}</div>
}

См.: https://nextjs.org/docs/app/api-reference/functions/redirect , https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes.

PS: возможно, вы захотите сделать заголовок необязательным, если хотите обрабатыватьexample.com/blog/12345слишком.