Absolute imports in Next.js

When I was working on my first project with Next.js I spent a lot of time to find how to use absolute imports. The solution turned out to be quite simple. You need to indicate this resolve option in your next.config.js file:

module.exports = {

  webpack(config) {

    config.resolve.modules.push(__dirname)

    return config;

  },

}

Or if you want to add absolute path only for one directory you can use alias:

module.exports = {

  webpack(config) {

    config.resolve.alias['components'] = path.join(__dirname, 'components');

    return config;

  },

}