Export your Next.js app into a static HTML app

Using client side routing in Next.js can cause navigating issues in production, your site crashes or throw a No page found error when you try to reload or load a dynamic page directly, assuming the page does not need to make any REST calls, the page would load successfully.

FIX

You should export all your pages into a static HTML app, create next.config.js file or replace the content with the following code if you have one already:

const fetch = require('isomorphic-unfetch');

module.exports = {
  exportTrailingSlash: true,
  exportPathMap: async function() {
    const paths = {
      '/': { page: '/' },
      '/about': { page: '/about' }
    };
    const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
    const data = await res.json();
    const shows = data.map(entry => entry.show);

    shows.forEach(show => {
      paths[`/show/${show.id}`] = { page: '/show/[id]', query: { id: show.id } };
    });

    return paths;
  }
};

As is shown in the above config, the /about path is very similar to the / path. But for the shows we do something a bit different.

Here's what's going on:

To render the shows in our app, we first fetch the list of shows, this is the same fetch we do in /. We then loop the shows and add a new path and query for every one of them.

For example for the show of Batman with the id 975 the loop will add the following path:

'/show/975': { page: '/show/[id]', query: { id: '975' } }

The page /show/[id] will then use the query object to get the id and fetch more info about the show.