Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Absolute Imports& Module Path Aliases

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Absolute Imports

      
      Next.js supports setting up "paths" and "baseUrl" options in the tsconfig.json or jsconfig.json files. These configurations simplify the module import process. For example:
      Before:
      import { Button } from '../../../components/button';
      After:
      import { Button } from '@/components/button';

      1. Absolute Imports

      The baseUrl option allows you to import modules directly from the project's root directory. Here's how you can set it up:
      // tsconfig.json or jsconfig.json
      {
        "compilerOptions": {
          "baseUrl": "."
        }
      }
      In this configuration, baseUrl is set to ".", which represents the project root directory. Now, if you have a components folder at the root, you can create a component like this:
      // components/button.js
      export default function Button() {
        return <button>Click me</button>;
      }
      You can now import this component without needing a relative path:
      // app/page.js
      import Button from '/components/button';
      
      export default function HomePage() {
        return (
          <>
            <h1>Hello World</h1>
            <Button />
          </>
        );
      }

      2. Module Aliases

      Besides baseUrl, you can set up "paths" to create custom aliases for your directories:
      // tsconfig.json or jsconfig.json
      {
        "compilerOptions": {
          "baseUrl": ".",
          "paths": {
            "@/components/*": ["components/*"]
          }
        }
      }
      In this example, we map the alias @/components/* to "components/*":
      // components/button.js
      export default function Button() {
        return <button>Click me</button>;
      }
      Now you can import the component using the alias:
      // app/page.js
      import Button from '@/components/button';
      
      export default function HomePage() {
        return (
          <>
            <h1>Hello World</h1>
            <Button />
          </>
        );
      }

      Relationship Between baseUrl and paths:

      The paths in the paths option are relative to the baseUrl. For example:
      // tsconfig.json or jsconfig.json
      {
        "compilerOptions": {
          "baseUrl": "src/",
          "paths": {
            "@/styles/*": ["styles/*"],
            "@/components/*": ["components/*"]
          }
        }
      }
      // pages/index.js
      import Button from '@/components/button';
      import '@/styles/styles.css';
      import Helper from 'utils/helper';
      
      export default function HomePage() {
        return (
          <Helper>
            <h1>Hello World</h1>
            <Button />
          </Helper>
        );
      }
      In this setup, @/components/button actually points to src/components/button, and similarly for other aliases.

      The src Directory

      
      Up until now, you've likely been placing your code in the root-level app or pages directories. However, Next.js also supports placing your code within a src directory, which can help separate application code from project configuration files (which are usually in the root).
      To use a src directory, move your files from app or pages to src/app or src/pages:
      
      
      Things to Consider When Moving to a src Directory:
      • The /public directory should remain in the project root.
      • Configuration files like package.json, next.config.js, and tsconfig.json should stay in the project root.
      • .env.* files should also remain in the project root.
      • If both app and src/app directories exist, src/app will be ignored.
      • If you're using src, consider moving other application folders like /components or /lib.
      • If using middleware, ensure it is placed within the src directory.
      • If you're using Tailwind CSS, update the content option in tailwind.config.js accordingly:
      /** @type {import('tailwindcss').Config} */
      module.exports = {
        content: [
          './src/**/*.{html,js}',
        ],
        // ...
      }

      References

      • Using zsh as the Default Shell on Mac
      • Configuring Environment Variables
      • Configuring Absolute Imports and Module Path Aliases