How to Add Trailing Slash in NextJS Routes

In NextJS default configuration, the framework will remove the last slash in your route also called the trailing slash. In your project after creating a file pages/contact.js you can browse to the page with /contact path. And, when you try to use /contact/, it redirects back to /contact.

Most static site generators (SSG) like Jekyll, Hugo, Eleventy, etc. generate the trailing slash in the output. With these other SSGs, you need to use /contact/ instead. So, to get the same behavior in NextJS, you need to add the following configuration in your next.config.js:

module.exports = {
  trailingSlash: true,
};

By setting this option, when you try to access to contact path by using /contact, it automatically redirects to /contact/.

For your information, when you do next export (after a next build), it also works as expected by adding the trailing slash. Under the hood, NextJS generate a contact file under /contact/index.html in the output directory.

Next JS Templates and Themes

Checkout our Next JS templates and themes that you can use for your React project. Built on top of Tailwind CSS, the templates use modern code pattern like component and UI blocks. You can also browse my portfolio:

• React Themes Tailwind CSS
• Tailwind CSS Themes

Easy to modify and customize, you can change the themes based on your needs. It saves you development and design time.