Use absolute imports in Next.js app deployed with ZEIT Now
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
.)
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.