NextJs Rewrites, SSGed pages are built again when accessed

[RaphaelGimenez]

Hello 👋

I'm having trouble understanding some behaviors of NextJs rewrites.

For context:
I have a shopping page situated in pages/boutique/page/[page].jsx. On build, I statically generate every shopping page for pagination.
Then I use NextJs rewrites to access the shop pages from /boutique, /boutique?page=2 ...

Here are the rewrites:

rewrites: () => [
      // shop rewrites
      {
        source: '/boutique',
        has: [
          {
            type: 'query',
            key: 'page',
            value: '(?<page>.+)',
          },
        ],
        destination: '/boutique/page/:page',
      },
      {
        source: '/boutique',
        destination: '/boutique/page/1',
      },
]

Everything works on local.

But when on netlify if I try to access directly domain.com/boutique, the page is SSRed through the ___netlify-handler function and is build again from the ground up. Why isn't it taking the already generated data from the build process ?

To note that when on netlify if I access the shop page from the home page everything works fine because NextJs fetch the _next/data/rLzS2FNycK4svgL2EMf5y/boutique/page/1.json data and the js bundle for the page.

I don't understand why this is happening and would appreciate some help.

Thanks to everyone working on this project 👏
Have a good day

[ascorbic]

Hi @RaphaelGimenez!
The problem is that even though there is a rewrite, Next doesn't pre-render the index.html page. This means we can't serve the files directly from the CDN and have to hit the origin to handle the rewrite. You have a few options that I can think of off the top of my head. One, you could use a redirect instead (a Netlify redirect would be ideal, as it runs at the edge). Alternatively you could duplicate your page template as index, but with page=1 hard-coded. That would ensure it generates the index.html file.

[RaphaelGimenez]

Hey @ascorbic!

Thanks for the help 🙇 ! I've tried quite a few things since yesterday and I now have two almost solutions.

The first, the easier, is using only Netlify rewrites. Here are what they looks like:

[[redirects]]
  from = "/boutique"
  to = "/boutique/page/:page"
  query = {page = ":page"}
  status = 200
  force = true

[[redirects]]
  from = "/boutique"
  to = "/boutique/page/1"
  status = 200

[[redirects]]
  from = "/boutique/:category"
  to = "/boutique/:category/page/:page"
  query = {page = ":page"}
  status = 200
  force = true
  
[[redirects]]
  from = "/boutique/:category"
  to = "/boutique/:category/page/1"
  status = 200

This works but make the app reload since Netlify has to do the rewrite?

The other one is a mix of duplicating the template to an index.jsx file and using Netlify rewrites for pages with the query ?page=x:

TLDR:
In this solution, the first page of the pagination is served by the /boutique/index page (so no page reload when routing to /boutique for ex) and the others are rewritten-ed by netlify to /boutique/page/x (so I need to make a page reload to access /boutique?page=2 for ex).

⚠️ This solution works for /boutique but not for /boutique/a-category

---

So I've duplicated my template as index as you said and I pair it with netlify rewrites. It looks like this:

• For my pages templates I have: /pages/boutique/index.jsx and /pages/boutique/page/[page].jsx
• The netlify rewrites looks like this:

[[redirects]]
  from = "/boutique"
  to = "/boutique/page/:page"
  query = {page = ":page"}
  status = 200
  force = true

So when I access the page /boutique, netlify is serving the generated /boutique/index.html page, and when I access /boutique?page=2, netlify is serving /boutique/page/2.
For this to work I have to make a page reload client side when navigating from /boutique to /boutique?page=2.

Since I don't intend on having a lot of pages it's not really an issue for now.

However this does not work for my pages /boutique/[category]. The setup is the same and the template is too. The only difference is that it is a dynamic page due to [category].

• The pages templates are: /pages/boutique/[category]/index.jsx and /pages/boutique[category]/page/[page].jsx
• The netlify rewrites looks like this:

[[redirects]]
  from = "/boutique/:category"
  to = "/boutique/:category/page/:page"
  query = {page = ":page"}
  status = 200
  force = true

When accessing /boutique/a-category?page=2 netlify serves me /boutique/a-category/page/2 as it should but after rendering the page, NextJs reroute me to the /boutique/a-category/index.jsx page. Which I don't understand why 😮‍💨

I've tried moving /pages/boutique/index.jsx and /pages/boutique/page/[page].jsx to /pages/boutique/test/[test]/index.jsx and /pages/boutique/test/[test]/page/[page].jsx and replicating netlify rewrites to these pages. So I could see if the issue was related to my category page but no, the rerouting happens to. So I think that it may be because it's a dynamic route 🤔

If you have any idea on why this happening, I'd really love the help.
Anyway, I'm going to use the first solution for now.

Thank you again for the past feedback, it really helped me understand a bit better how netlify and the nextjs plugin works. 🎉
Have a good day 🙏