What is "@" in Next.js paths?

Question

I am new to Next.js and and I am seeing an '@' character in file paths. Example:

import Footer from '@/components/Footer'

and even in jsconfig.json:

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

The Next.js documentation or any other source does not provide the definition of this "@" character. I am seeing this '@' for the first time in paths. Please help

Answer 1

The @ character is used to define path alias in Next.js. This is provided by webpack which is the module bundler used by Next.js.

In the example you provided, the paths property defines an alias for the components directory, using the @ symbol as a prefix. The asterisk * is a wildcard character that allows you to specify a pattern for matching file paths.

With this configuration, you can import components from the components directory using the @ alias, like import Footer from '@/components/Footer';

This will be resolved to the components/Footer.js file, based on the path mapping defined in the jsconfig.json file

Documentation can be found here: Absolute Imports and Module Path Aliases

Answer 2

It is just a configuration for next js which is customizable which is given under the js/ts config.json file

which could be set to any given path name for instance in my case its current directory and everything inside of it.

 {
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}