Next.js nested routes not working

My next.js application page route is

  • /pages
    • /customers
      • index.tsx
      • [id].tsx

Go to xxx.layer0.link/customers/12345 (or reload page),
browser response
An unexpected error occurred while processing the request with next.js. (page="customers/[id]")

How can I fix?

routes.ts

// This file was automatically added by layer0 deploy.
// You should commit this file to source control.
import { Router } from '@layer0/core/router';
import { nextRoutes, renderNextPage } from '@layer0/next';

export default new Router()
  .match('/service-worker.js', ({ serviceWorker }) => {
    return serviceWorker('.next/static/service-worker.js');
  })
  .use(nextRoutes); // automatically adds routes for all files under /pages

All layer0 packages ver is 3.12.1.

1 Like

Does this work without routes.ts?

Thanks for reply.

I deleted routes.ts then deploy. but buid failed.
And I tried without .use(nextRoutes).
Browser reponse
None of the specified routes in "default" destination have matched the request (edge receive).

thanks.

Looks like there is a bug with static pages that do not have getStaticProps but do have a path variable. We are working on a fix and will update here when we have something to share. Thank you for posting!

3 Likes

Try this structure to fix it. I hope it will solve your issue quickly and easily

dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)

example url

/dashboard/repository/blender/tags

/dashboard/repository/surrender/tags

In your component, you can get it like below tags.tsx

import { useRouter } from 'next/router'

const C = () => {
  const router = useRouter()
  const { blender } = router.query;
  console.log(blender)
}

@Dominic @miki_matsumoto

Is this an issue you’re facing after upgrading to the latest version of Edgio?

cc @patrick.saweikis @tevfik.sertel