Next.js: DOCS: Undocumented `if...else statement` removal option via `process.browser` and `webpack.DefinePlugin`

[tcharlat]

I recently needed a feature allowing me to remove if...else statement from build output via awebpack.DefinePlugin (DOCS) server vs browser condition

I looked into Next.js source and happily found a process.browser in webpack-config

let webpackConfig: webpack.Configuration = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // ...
      'process.browser': JSON.stringify(!isServer)
    })
  ]
};

I have done the tutorial and tried searching for this process.browserin the docs.
I found a lot of "injectable" process.env[...] related documentation, but nothing related to default build targets related variables.

I tested it and it's doing exactly what I needed.

Demo:

const api: API = process.browser ? require("../api/proxy").api : require("../api/auth").api;

api/proxy.ts

export const api: API = {
  find: (id: string) => fetch(`/api/resource/${id}`), // regexp \/api\/resource\/
  // ...
};

api/auth.ts

const backendUrl = `${process.env.SECRET_BACKEND}/api/${process.env.SECRET_BACKEND_VERSION}`;

export const api: API = {
  find: async (id: string) => {
    const refs = await fetch(
      // regexp \/refs\?access_token=
      `${backendUrl}/refs?access_token=${process.env.SECRET_BACKEND_ACCESS_TOKEN}`
    );
    return fetch(`${backendUrl}/resource/${id}`, {
      headers: {
        Authorization: `Token ${process.env.SECRET_BACKEND_ACCESS_TOKEN}`,
        ref: (await refs.json()).master
      }
    });
  }
  // ...
};

rm -rf .next
npm run build
cd next

grep \/api\/resource\/ . -rl --exclude-dir=cache 

./static/OQ9_IPyl2LC8X7moS4k5r/pages/index.js

grep \/refs\?access_token= . -rl --exclude-dir=cache 

./serverless/pages/index.js

• is the process.browser meant to be private ?
• is there a less hacky or more default way to implement this kind of build-target-toggle that I missed in the documentation ?
• If no, and no, should this make its way to documentation ?

[jamesmosier]

Using typeof window !== 'undefined' in projects should achieve this conditional for you and remove that correct code from server or client bundles.

The switch over for using process.browser in the Next codebase was recently merged into canary in #7651 in favor of typeof window !== 'undefined'. process.browser won't be removed anytime soon according to the comments in #7651, but is not recommended.

As far as documentation, I can certainly see benefit in that but will leave it up to the maintainers to decide if/where it should go 🙂 maybe just the FAQ section for now?

[tcharlat]

@jamesmosier Thanks for the update !

https://github.com/zeit/next.js/blob/19f3c4d77cf789331efffaddd250b2779844808f/packages/next/build/webpack-config.ts#L456-L458