How can you handle trailing slashes in next.js routes? - next.js

Question

I am trying to set up a next.js app, but I'm having trouble handling routes with a trailing slash. So, for example, if I have a pages structure like this:
pages
- index.js
- blog
- index.js
- [slug].js
then going to / gives me the base index.js, going to /blog gives me blog/index.js, and going to /blog/my-post gives me blog/[slug].js — so far so good.
But going to /blog/ gives me a 404 error, and there appears to be no way at all to handle this without entirely replacing the next.js router—I can't even redirect /blog/ to /blog. Is there any way around this, or do I need a custom router? Is there a way to extend the next.js router in a way that will let me handle these, without entirely replacing it?

Answer 1

There is an option with Next.js 9.5 and up.
In next.config.js, add the trailingSlash config:
module.exports = {
trailingSlash: true,
}
Source: Trailing Slash

Answer 2

UPDATE: If you are using next export than you can solve the issue by adding exportTrailingSlash to your next.config.js
As of this writing, there seems to be no way to solve this issue without defining your own custom server.
Previous answer:
You must create a new file blog.js shown bellow:
With the following server.js
const express = require('express')
const next = require('next')
const PORT = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app
.prepare()
.then(() => {
const server = express()
server.get('/blog', (req, res) => {
const actualPage = '/blog'
// const queryParams = { title: req.params.id }
app.render(req, res, '/blog', {})
})
server.get('/blog/:id', (req, res) => {
const actualPage = '/blog/[id]'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(PORT, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${PORT}`)
})
})
.catch(ex => {
console.error(ex.stack)
process.exit(1)
})
node server.js should start your server and you would have the mapping that you need.
Note, blog/index.js is not used in this example.

Answer 3

I don't have a solution to this. This is still a massive problem. However, I do have a very horrible hack that I've been using to workaround this problem in Next.js 9.x.x
In my /pages/_error.js I've added the following code:
FourOhFour.getInitialProps = ({asPath, res}: any): any => {
if (asPath.endsWith('/')) {
res.writeHead(301, {Location: asPath.substring(0, asPath.length - 1)});
return res.end();
}
return {};
};
This will ensure that all routes that end with a trailing slash are redirected to the non-trailing slash path via a 301 redirect.

Answer 4

I`ve done that redirect by using nginx for my production app:
rewrite ^(.+)/+$ $1 permanent;

Answer 5

You can add this to your _app.js file
MyApp.getInitialProps = async ctx => {
const pathAndQueryDivided = ctx.ctx.req.url.split('?');
if (pathAndQueryDivided[0].endsWith('/')) {
const urlWithoutEndingSlash = pathAndQueryDivided[0].replace(/\/*$/gim, '');
ctx.ctx.res.writeHead(301, {
Location: urlWithoutEndingSlash + (pathAndQueryDivided.length > 1 ? `?${pathAndQueryDivided[1]}` : ''),
});
ctx.ctx.res.end();
return {};
}
const initialProps = await App.getInitialProps(ctx);
return {
...initialProps,
};
};
App.getInitialProps gets called first server-side
It divides splits the path and the query params because we only want to know if the url ends with a slash
It asks if the url ends with a slash
It replaces the last slash of the url with nothing
It redirects you to the url without the slash + the query params if there's any