Use absolute imports in Next.js app deployed with ZEIT Now

Question

In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like

import Header from          


        

Answer 1

Next.js 9.4 and later

If you're using Next.js 9.4 or later, see Black's answer.

---

Next.js 9.3 and earlier

There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..

1. Make it work locally

I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:

"scripts": {
  "dev": "NODE_PATH=. next",
  "build": "NODE_PATH=. next build",
  "start": "next start"
},

2. Make it work when you deploy

When you deploy to ZEIT Now, NODE_PATH must be set in a different way.

You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:

{
  "version": 2,
  "build": {
    "env": {
      "NODE_PATH": "."
    }
  }
}

This tells Now to use NODE_PATH=. when buildnig your app (see build.env).

(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)

Answer 2

Change web pack configuration:

//next.config.js file
module.exports = {  
    webpack(config) {
      config.resolve.modules.push(__dirname)
      return config;
    },
}

Then use it like this:

import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources

Answer 3

In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.