nextjs path alias

Step 1: Install Dependencies

npm install --save-dev eslint-plugin-import eslint-import-resolver-alias

Step 2: Configure ESLint Create or modify your .eslintrc.js file to include the following configuration:

module.exports = {
  // ... other ESLint configurations
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@components', './src/components'],
          ['@styles', './src/styles'],
          // Add more aliases as needed
        ],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      },
    },
  },
};

Step 3: Configure TypeScript (if using TypeScript) Modify your tsconfig.json to include compiler options for path aliases:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/": ["components/"],
      "@styles/": ["styles/"]
      // Add more aliases as needed
    }
  }
}

Step 4: Configure Webpack (if not using TypeScript) Modify your next.config.js to include the webpack configuration for path aliases:

const path = require('path');

module.exports = {
  // ... other Next.js configurations
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, 'src/components'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      // Add more aliases as needed
    };

    return config;
  },
};

Step 5: Update Imports Update your import statements in your Next.js components to use the defined path aliases:

// Before
// import MyComponent from '../../components/MyComponent';
// import styles from '../../styles/main.module.css';

// After
import MyComponent from '@components/MyComponent';
import styles from '@styles/main.module.css';

Step 6: Restart Development Server Restart your Next.js development server for the changes to take effect:

npm run dev