NextJS custom URLs

Question

I want to transfer my blog from Jekyll to NextJS and looking how to specify custom URLs. I followed the official NextJS guide on their website, but the routing part was relatively simple. From docs, I got that URLs are based on folders/files structure, but I want to have a subfolder per site topic in the pages folder but keep URLs flat. Something like that:

pages (top-level folder)
- investing (subfolder)
  - how-to-start-investing.js (https://example.com/how-to-start-investing <- no investing folder in URL)
- devops (subfolder)
  - how-to-upgrade-ubuntu.js ([https://example.com/how-to-upgrade-ubuntu <- no devops folder in URL)

In Jekyll, I used Front Matter to specify a custom URL per page. In NextJS looks like I have to use rewrites, but is there any other option? Also Link component has an attribute to change the link URL, but this is just to display links with URLs.

Szaman · Accepted Answer · 2022-04-17 13:47:11Z

3

In NextJS, routes are defined by the structure of the pages directory. If you don't want that, you're going to have to work around that feature. Some options you have:

Use rewrites to map incoming request from /how-to-start-investing/ to /investing/... — note that unlike redirects, rewrites don't expose the destination path, so the user will stay on /how-to-start-investing/ url.
Create files in the root directory called how you want your routes to be exposed (e.g. how-to-start-investing.js). Inside the file, export another component, for example:

// how-to-start-investing.js
import { HowToStartInvesting } from "../components/investing/HowToStartInvesting";
export default HowToStartInvesting;

If you use this approach, I suggest you put your components somewhere outside the pages directory, so you don't have two urls for the same component.

answered Apr 17, 2022 at 13:47

Szaman

2,4161 gold badge19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergey Sypalo Over a year ago

I'm keen on the first approach as with the second I can just put all my site pages to the pages folder. But how NextJS would know that someone trying to access sypalo.com/how-to-start-investing should get a page from a particular subfolder. But tried to create a rewrite rule as you proposed - it didn't work. But strange enough when I swapped source and destination it worked, I was able to access the article using both long and shortened URL without folder name in path.

Sergey Sypalo · Accepted Answer · 2022-04-18 08:10:01Z

Finally got it to work, so in order to use custom URLs, I have to combine rewrites with redirects, the latter needed for SEO.

Without redirects, I can just use the canonical tag to tell Google my preferred URL, but technically the same article keeps on being available using two URLs, in my case:

sypalo.com/how-to-start-investing
sypalo.com/investing/how-to-start-investing

So the final next.config.js is:

module.exports = {
   async rewrites() {
     return [
       {
         source: '/how-to-start-investing',
         destination: '/investing/how-to-start-investing'
       }
     ]
   },
   async redirects() {
    return [
      {
        source: '/investing/how-to-start-investing',
        destination: '/how-to-start-investing',
        permanent: true
      }
    ]
  }
 }

And this is to be repeated for all URLs.

Collectives™ on Stack Overflow

NextJS custom URLs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related