Dynamic Clean URL shows a 404 error on Reload

[Xtremilicious]

As the title says, the dynamic URL works when redirected after a click, but when the dynamic page is reloaded, it shows a 404 error(after deployment on Netlify).

Tried deploying it on Zeit, and it works!
I guess I need to configure something for proper deployment in Netlify. Kindly help :)

The Clean URL defeinition:

The dynamic page:

[jericopulvera]

@Xtremilicious have you made this work on Netlify?

[Xtremilicious]

@jericopulvera Yes I fixed it. The thing is you need to specify the dynamic URLs as well, in the next.config.json file. If you don't have this file, you can get information about it from the Next.js official docs.

Note: For the dynamic URLs in my project, I had a data.js file from which I pulled the data for the getting the slugs for the corresponding dynamic URLs. The code is given below:

// next.config.js
const withImages = require("next-images");
const projectsData = require("./data.js");
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");

module.exports = (phase, { defaultConfig }) =>
  withImages({
    exportPathMap: async function(defaultPathMap, { dev, dir, outDir, distDir, buildId }) {
      const paths = {
        "/": { page: "/" },
        "/learn/web-development": {
          page: "/learn/web-development"
        },
        "/learn/game-development": {
          page: "/learn/game-development"
        },
        "/learn/mobile-development": {
          page: "/learn/mobile-development"
        },
        "/learn/machine-learning-and-ai": {
          page: "/learn/machine-learning-and-ai"
        }
      };
      if (phase !== PHASE_DEVELOPMENT_SERVER) {
        projectsData[Object.keys(projectsData)[0]].map(project => {
          project.category.map(t => {
            const slug =
              t === "web-dev"
                ? "web-development"
                : t === "mob-dev"
                ? "mobile-development"
                : t === "game-dev"
                ? "game-development"
                : "machine-learning-and-ai";

            let urlTitle = project.title
              .toLowerCase()
              .split(" ")
              .join("-");

            paths[`/learn/${slug}/project/${urlTitle}-${project.id}`] = {
              page: `/learn/${slug}/project/[id]`,
              query: { id: `${urlTitle}-${project.id}` }
            };
          });
        });
      }

      return paths;
    }
  });

As you can see, I pulled the data (data.js in my case) and parsed it accordingly to provide me with the slugs I need to specify the dynamic URLs. You can also make it work in a case where you need to call an API to get the data, after which you can parse the slugs accordingly.

What this does is it specifies all the URLs (dynamic URLs as well) to be considered while rendering a static site (next export). So static HTML pages are created for them as well. Hope this helps :)

Here's a little portion of the data I pulled:

[
 {
    id: 119,
    type: "article",
    title: "Meme Maker with React",
    category: ["web-dev"],
    tech: ["React", "JavaScript", "HTML", "CSS"],
    datePublished: "Dec 24, 2018",
    projectURL: "https://medium.com/free-code-camp/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f"
  },
 {
    id: 118,
    type: "video",
    title: "Evernote Clone with React",
    category: ["web-dev"],
    tech: ["React", "Firebase", "Node", "JavaScript", "HTML", "CSS"],
    datePublished: "Jul 15, 2019",
    projectURL: "https://www.youtube.com/watch?v=I250xdtUvy8"
  }
]

Working dynamic URL example for the above two:

1. https://projectlearn.io/learn/web-development/project/meme-maker-with-react-119
2. https://projectlearn.io/learn/web-development/project/evernote-clone-with-react-118

[pawel2105]

How did you configure it to render (instead of 404) new pages on browser reload, that were created post-deploy?

[Xtremilicious]

The paths/URLs mentioned in the next.config.json gets statically generated during next build. Example, for https://projectlearn.io/learn/web-development/project/meme-maker-with-react-119, a page called meme-maker-with-react-119.html exists in /learn/web-development/project/ after next build

[pawel2105]

Yep, that's during the build process. I meant how are you handling any additional pages that are available after the build process finishes?

[Xtremilicious]

Couldn't get you. Maybe an example would help. Any new pages added after the build process can't be statically generated by next, so I guess you need to set up a server.js file to route the new URLs accordingly.

[jericopulvera]

For those who are still looking for a solution.

By default, Netlify and some other static site generator looks for the static HTML file based on request.

The flow looks like this:

1. Server loads https://netlify-site.com/users/1000

2. The server would then look to serve /users/1000.html

But it won't be found since it does not exists and that dynamic page is generated as their actual file name.

[id].js to [id].html

Solutions:

exportPathMap

To generate the static HTML files ahead of time via the deployment build process.
This approach is not recommended on larger data sets as it would increase your build time.

Rewrites

What this will do is instead of server looking for /users/1000.html it would rewrite to /users/[id].html. At Netlify you can configure this behavior via netlify.toml file.

• Github Source Code
• Netlify Link

[jericopulvera]

Can you provide a gist of your [token].html ?

[tinmarzoo]

I was just trying to see if I could get the parameter so my [token].js looks like this :

import { useRouter } from 'next/router'
export default () => {
  const router = useRouter()
  if (!router.query.token)
    return <h1>Not working</h1>
  return <h1>{router.query.token}</h1>
}

[jericopulvera]

It seems to be working fine on mine.

https://netlify-rewrite-test.netlify.app/account/activate/2

Source Code

[mcsdevv]

Hey all, I can't speak for Netlify, but this works automatically on Vercel (https://vercel.com), you might want to give that a try 😀

[tinmarzoo]

Just did, and it works indeed ;)