Next.js: Custom extensions with priority

[coluccini]

Hi!
I would like to achieve something similar to what React Native does with the .android.js and .ios.js extensions. The idea is to have 2 different "extensions" and "decide" which one to use base on an env var.

I've made a quick test using create-react-app and I achieved it by using this webpack config:

resolve: {
  extensions: [`.${process.env.VAR}.js`, '.js'],
  ...
}

Lets say that process.env.VAR is foo, if I import Component, webpack will first try to find Component.foo.js and if doesn't exist will search for Component.js.

Is there a way to do something similar in Next? Reading a few issues I've found a pagesExtensions existing in next.config.js but I'm not sure if work similar to webpack's extensions config…

[coluccini]

@timneutkens do you think this PR -> https://github.com/zeit/next.js/issues/2391 will add what I need to achieve this?

[timneutkens]

@coluccini, so, there's one question I have, do you want this to work for pages too or not. I'm expecting it's not needed. In that case you can do what you want to do in next.js v5 because webpack will run on the server and client side 👍

[coluccini]

Excellent! I don't need this to work on pages :)
Do you know if there is a estimated date to the v5 release?

[timneutkens]

Excellent! I don't need this to work on pages :)

Great!

Do you know if there is a estimated date to the v5 release?

No definitive date, but I'm working on the final bits of universal webpack 👍

[coluccini]

so I'll be watching you! 🤣
Thanks!