Getting 404 when loading dynamic routes on nextjs

Question

I make a dynamic route like [results].js

import { useRouter } from 'next/router'

const Post = () => {
    const router = useRouter();
    const { results } = router.query;

    return <p>Post: {results}</p>
}

export default Post

and configure my next.confi.js

module.exports = {
    trailingSlash: true,
}

It's working well on dev mode but in production mode, I have the only problem with the dynamic page route after npm run export.When I browse htttps://my-domain/search/searchslog it's getting 404 error page.

Next.js uses a file base routing. What is your directory structure? — Andrew Zheng
– Andrew Zheng, Commented Mar 29, 2021 at 13:21
@TanjeebAhsan were you trying to deploy this to Cloudflare Pages? — harishannam
– harishannam, Commented Jul 15, 2022 at 13:12

juliomalves · Accepted Answer · 2021-03-29 18:17:09Z

0

next export will pre-render all pages and export your app as static HTML. For your dynamic route, you'll need to use getStaticPaths to let Next.js know which HTML pages to generate for that route.

// pages/search/[results].js

export async function getStaticPaths() {
    return {
        paths: [
            { params: { results: 'result1' } },
            { params: { results: 'result2' } }
        ],
        fallback: false
  };
}

The function above will generate /search/result1 and /search/result2 pages. Any other /serach/* page will result in a 404.

answered Mar 29, 2021 at 18:17

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tanjeeb Ahsan Over a year ago

I tried something like below for search from

<input className="text-field" type="text"  value={this.state.userName} onChange={event => this.setState({userName: event.target.value})}/>        <a href={'/search/'+this.state.userName} className="search-button"></a>

There have some conditions on [result].js if the search key match with fetch API data.It's working on dev mode but I for production is show 404.

juliomalves Over a year ago

You can't really use a statically generated dynamic route page like that. All possible search routes (/search/*) need to be pre-rendered at build time for them not to 404. Try using the query param in the URL to pass the search term instead (/search?key=value).

Tanjeeb Ahsan Over a year ago

I need a URL www.domain-name.com/search-any-keys something like that for the search result. What will be the component design for that?

Collectives™ on Stack Overflow

Getting 404 when loading dynamic routes on nextjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related