Allow static exports without trailing slashes

[gkaemmer]

Hello, first PR here 😎. Please let me know if anything should change.

Fixes #2944 by adding a exportTrailingSlashes option to next.config.js.

I'm not crazy about adding to the global __NEXT_DATA__ object, but it seems the cleanest way to get settings so deep into the rendering logic.

I looked into adding a test for this, but it would seem to add an ugly wart to integration/static/test/index.test.js, which only tests a single next.config.js. Can definitely add if necessary though.

[timneutkens]

@gkaemmer awesome, I'll review this latest this week 👍

[manovotny]

@timneutkens any updates on when this might be released?

[vzaidman]

any updates on when this might be released?

[fikip]

Hello, any update on when this might get merged & released? It's a pretty crucial feature for my use case of next's static export (I'm currently solving this by commenting out the relevant lines in the node_module, which isn't really great 🙁)

[NathanielHill]

Was this working for you @gkaemmer? Looks like you meant nextConfig instead of config. @timneutkens Any word on whether this could be merged, and if not why?

I noticed that routes without trailing slashes worked on a static site until I imported 'next/router', at which point the router begins appending slashes. The routes without slashes work even when requesting directly from the server. So it's just the router adding them through <Link> elements. This is important for analytics (As is, each route will generate two unique identifiers for Google Analytics), as well as for SEO (avoiding duplicate content).

[gkaemmer]

No, actually, I started trying to fix tests yesterday then got sidetracked--not ready to be merged yet :(

[NathanielHill]

Just skimming the build logs, looks like config->nextConfig. That's definitely the line to fix, I can fix my build by removing the / from https://github.com/gkaemmer/next.js/blob/d62d9d14344931f54514179619cf13d4752fca8d/lib/router/index.js#L114

[gkaemmer]

That's the only lint error, but I think there might still be some failing tests after it passes linting

Running tests locally now, they take quite a long time.

[timneutkens]

So, I was thinking this morning that this might actually be compiled at build time instead of providing it at runtime and having __NEXT_DATA__ used here.

So what you could do is add DefinePlugin with process.env.NEXT_EXPORT_TRAILING_SLASHES which holds the value of config.exportTrailingSlashes. So that it's compiled at build time.

I'm also not sure how you're passing the config to the client right now, so it wouldn't work client-side right 🤔 (with the current solution)

[NathanielHill]

Implemented in #4524

[NathanielHill]

This is fixed 🎉
https://zeit.co/blog/new-static-deployments

[gkaemmer]

Amazing! Thanks @NathanielHill

[timneutkens]

I'm still not sure how now static deployments fixes this 🤔

[dasbego]

Seems like this won't fix the problem in case you're not deploying to Now.

[fikip]

So is this officially marked as solved? Do people who don't deploy to Now still have to solve this issue by commenting out pieces of code in the next.js module? 🙁

[timneutkens]

So is this officially marked as solved?

Like I said:

I'm still not sure how now static deployments fixes this 🤔

[dasbego]

This looks like a ugly workaround, but I've set __NEXT_DATA__.nextExport = false inside a componentDidMount function in one of my components.
If you look into the code the usage of this variable is important in build time for some static exporting features. In runtime I found that this property will be the one causing the ending slash to be added in this line https://github.com/zeit/next.js/blob/canary/lib/link.js#L146.
Works for me by now, tho.

[fikip]

@dasbego I've tried your fix and it seems to work well enough. The links still have the trailing slashes on hovering (and displaying the href), but on clicking they actually lead where they're supposed to (no trailing slashes). Is this happening to you too?

[lasersox]

@bozskejkaja

I just tried the NEXT_DATA.nextExport = false workaround and it seems to work as advertised. I don't see the trailing slash in mouseover. Maybe you are seeing some cached resource?

[mrcoles]

Can this or something similar be re-opened for folks who are using next export and not running their deployments on https://zeit.co/now ?

[justinphilpott]

This is an annoying little bug. All we need is a little config flag to switch this on and off...

[timneutkens]

@justinphilpott it's on experimental features already. module.exports = { experimental: { exportTrailingSlash: false }}

[jlobos]

@timneutkens in 8.1.1-canary.54 not found 😭

const withCSS = require('@zeit/next-css')

const nextConfig = {
  exportPathMap: async () => {
    return {
      '/': { page: '/' }
    }
  },

  experimental: { exportTrailingSlash: false }
}

module.exports = withCSS(nextConfig)