Custom routing with nextjs?

Question

I have a component which checks a path name and acts on it:

  const router = useRouter();
  const path = router.pathname;//props.location.pathname;

  const p = path.split('/').filter((s) => s !== "")
  let submissionId = p[0] == 's' && p[1]
  const submission = useQuery(SUBMISSION, {
    variables: {
      id: submissionId
    },
    skip: submissionId === false
  })

This works fine in a bog standard react app but nextjs redirects toa 404.

Is tehre a way to set up a pattern for nextjs to ignore none-existant routes and allow the component code to handle it?

Answer 1

I'm not sure I've understood clearly what you want, but you need to have defined page in the pages folder if you don't want Next.js to redirect to 404. However, you could use dynamic routes to make component which will do what you want.

Create a file named [dynamic].js in the pages folder:

import React from 'react'
import { useRouter } from 'next/router'

const Dynamic = () => {
  const router = useRouter();
  const { dynamic } = router.query;

  return (
    <div>
      My dynamic page slug: {dynamic}
    </div>
  )
}

export default Dynamic

And you can link to it like this:

<Link href="/[dynamic]" as="/dynamic-page-slug">
  <a>Link to my Dynamic Page</a>
</Link>

Answer 2

If you are using zeit now v2 then you can check out the Wildcard Routes here.

Basically in your now.json will have a filesystem handler and a wildcard handler as below

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "status": 404, "dest": "SOME_PAGE_HERE" } // <-- this is where all the non-existent routes will be routing to

  ]
}

Just replace the SOME_PAGE_HERE with your route as what you have declared in exportPathMap from the file next.config.js. Example: /contact, about-us and so on.