Next.js Absolute Imports and Module Path Aliases

Syntax

Next.js supports absolute paths based on the location of the src directory relative to the project root. To use an absolute path, prefix it with @ and define it in the jsconfig.json file at the root of your project.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The baseUrl option tells Next.js where to resolve module paths. In this example, it is set to ., which is the project root. The paths option maps module names to files or directories in the project. In this example, @/* maps to the src directory.

Example

Suppose we have a file called example.js in the src directory.

import foo from '@/foo';

console.log(foo);

In this example, we've used an absolute path (@/foo) to import the foo module from the src/foo.js file.

Output

When we run our Next.js application, the output of the console.log statement should be the contents of the foo module.

Explanation

Absolute imports and module path aliases are a powerful feature that can improve the organization and readability of your code. By defining a mapping between module names and file or directory paths, we can use consistent, meaningful names for our imports instead of relative paths that are easy to mistype or break when refactoring.

Use

Use absolute imports and module path aliases to:

• Improve the organization and readability of your code.
• Reduce the boilerplate of relative imports.
• Simplify the process of refactoring or moving files.
• Reduce the likelihood of errors caused by relative paths.

Important Points

• You'll need to have a jsconfig.json file at your project's root directory before you can start using path aliases.
• Don't forget to restart the Next.js server after modifying the jsconfig.json file.
• Avoid naming conflicts between your module path aliases and any actual NPM package names.

Summary

Next.js Absolute Imports and Module Path Aliases simplify the process of importing files in a Next.js project. With these features, you can use meaningful, consistent names for your imports while avoiding the boilerplate of relative imports. By defining a mapping between module names and file or directory paths, you can improve the organization and readability of your code while reducing the likelihood of errors caused by relative paths.