Search code examples
.htaccessnext.jsdynamic-importssg

Proper .htaccess settings for Next.js SSG catch all routes

I've build a website, using Next.js and SSG - Static Site Generation. I'm serving the website on an Apache server and, therefore, because of this answer, I'm using the following .htaccess configuration:

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

# Rewrite /foo to /foo.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}.html [L]

# Otherwise, rewrite /foo to /foo/index.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}/index.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}/index.html [L]

# Handling 404
ErrorDocument 404 /my-custom-404.html

And it's been working perfectly.

But recently, there was a need for an admin page, the usual CRUD. I've developed it without SSG in mind (because there were actually no need for it), created my own custom router and used Next.js's catch all routes to handle all content of this admin page, which I called dashboard.

So, on my built website, I have a whole bunch of page.html files, and a /dashboard/[[...dashboard]].html file, which is the CRUD itself (all subpages and contents are imported dynamically) - and, therefore, every single link starting with /dashboard will be handled via that file.

So, the problem is: navigating through the links on the website and into the dashboard, everything works perfectly. But if I try to directly access any link within /dashboard (including itself, and subroutes: /dashboard/users, for instance), it simply does not work. With the provided .htaccess configuration, it goes straight to 404.

I've tried a few different configurations added to .htaccess, but none have worked so far (either it still goes straight to 404, or the browser shows the error ERR_TOO_MANY_REDIRECTS):

RewriteCond %{DOCUMENT_ROOT}/dashboard/$1
RewriteRule (.*) /dashboard/[[...dashboard]].html [L]

This one almost worked... but the dashboard itself does not do anything (no subpages are ever rendered):

RewriteCond %{REQUEST_URI} .*dashboard*.
RewriteRule (.*) /dashboard/[[...dashboard]].html [L]

Important note: this whole thing works perfectly on the local dev server.

If anyone has any tip on how I can sort this thing out, I would really appreciate it!

Solution

  • I've managed to solve it, at least on an acceptable level.

    As I mentioned on the question, this was almost working (no sub page was ever rendered, but at least the browser was correctly redirecting to the dashboard):

    RewriteCond %{REQUEST_URI} .*dashboard*.
RewriteRule (.*) /dashboard/[[...dashboard]].html [L]

    No page was ever rendered, because I was using Next.js's withRouter/useRouter to inform my custom router of the current route (via router.asPath), and when the above rule as met, router.asPath was set to dashboard/[[...dashboard]].html. So, I wrote a small test to redirect any access with that asPath to my entrypoint. Basically:

    if(router.asPath.contains('[[...dashboard]]')
    router.push('/dashboard')

    But, another problem arouse... The first problem was solved: trying to access any dashboard routes directly was working, but navigating through the website (links) was not. After an arduous and long process of trial and error, I found out that my previous .htaccess rule was preventing my client-side code to request my [[...dashboard]].html file.

    RewriteCond %{REQUEST_URI} .*dashboard*.
RewriteCond %{REQUEST_URI} !(\[\[\.\.\.dashboard\]\])
RewriteRule (.*) /dashboard/[[...dashboard]].html?p=$1 [L]

    Basically:

    • If my request URI contains 'dashboard'
    • AND if that same request does not contain [[...dashboard]]
    • THEN I rewrite it to the dashboard file

    Hope this might help someone someday!