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
      CLI

      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.

      Next.js CLI

      
      In your package.json file, when you run npm run dev, it actually executes next dev. This command is part of the Next.js CLI, designed to help you start, build, and export your project.
      To see all available CLI commands, you can use npx next -h (where -h stands for --help).

      Commonly Used Next.js CLI Commands

      

      1. next build

      Running next build will generate a production-optimized version of your project:
      npx next build
      The build output provides details for each route, including Size and First Load JS, which represent the sizes of the gzip-compressed files. First Load JS is color-coded: green for high performance, and yellow or red for areas that may need optimization.
      ▲ Next.js 14.2.4
      Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types✓ Collecting page data✓ Generating static pages (5/5)
✓ Collecting build traces✓ Finalizing page optimization
      Route (app)                              Size     First Load JS
┌ ○ /                                    5.23 kB        92.3 kB
└ ○ /_not-found                          875 B          87.9 kB
      First Load JS shared by all            87 kB
├ chunks/23-ef3c75ca91144cad.js        31.5 kB
├ chunks/fd9d1056-2821b0f0cabcd8bd.js  53.7 kB
└ other shared chunks (total)          1.85 kB
      
      Size and First Load JS Explained:
      • First load JS: Total JS size for loading the page.
      • Size: Route-specific JS size.
      • First load JS shared by all: This is the common JS size shared by all routes.
      For example, for the / route, 92.3 kB (First Load JS) = 5.23 kB (Size) + 87 kB (Shared JS size for all routes).
      
      Understanding these metrics is essential for gauging the amount of JavaScript required to load each page and determining how much of this code is reused across different pages. This knowledge is vital for optimizing page load times and enhancing overall performance.
      

      2. next build - -profile

      This command enables React production profiling, requiring Next.js v9.5+:
      npx next build --profile
      
      To enable profiling, you can use any of the following three methods:
      1. Run npx next build --profile
      2. Modify the build script in package.json, then run npm run build
      {
        "scripts": {
          "build": "next build --profile"
        }
      }
      3. Run npm run build -- --profile
      
      Ensure you have the React Developer Tool extension installed in your browser, it provides real-time analysis as well, which used to analyze the performance of React components in real-time during development.
      Run npm run dev and open developer tool to check the profiler.
      
      

      3. next build - -debug

      This command provides detailed build output, including information about rewrites, redirects, and headers:
      npx next build --debug
      Example next.config.js:
      /** @type {import('next').NextConfig} */
      const nextConfig = {
        reactStrictMode: true,
        async redirects() {
          return [
            {
              source: '/index',
              destination: '/',
              permanent: true,
            },
          ];
        },
        async rewrites() {
          return [
            {
              source: '/about',
              destination: '/',
            },
          ];
        },
      };
      
      module.exports = nextConfig;
      Run npx next build --debug to see additional information for rewrites and redirects.
      

      4. next dev

      In development mode, use next dev for hot reloading and error reporting. By default, it runs on http://localhost:3000/. To change the port:
      npx next dev -p 4000
      To change the hostname:
      npx next dev -H 192.168.1.2

      5. next start

      In production mode, use next start to run the application after building it with next build. The default port is http://localhost:3000/. To change the port:
      npx next start -p 4000
      

      6. next lint

      Use next lint to perform ESLint checks on files in the pages/, app/, components/, lib/, and src/ directories. If ESLint is not installed, it provides installation guidance. To specify directories:
      npx next lint --dir utils

      7. next info

      The next info command prints system information useful for reporting Next.js bugs. Run it in the project root:
      npx next info
      Output example:
      Operating System:
        Platform: linux
        Arch: x64
        Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
      Binaries:
        Node: 16.13.0
        npm: 8.1.0
        Yarn: 1.22.17
        pnpm: 6.24.2
      Relevant packages:
        next: 12.0.8
        react: 17.0.2
        react-dom: 17.0.2
      Include this information in GitHub Issues to help the Next.js team diagnose problems.

      Summary

      Congratulations on completing this section! 👏👏👏
      We covered methods for automatic and manual project creation. For new projects, the automatic method is recommended. For integrating Next.js into existing projects, refer to the manual creation method.
      Common scripts in a Next.js project include:
      • npm run dev for development.
      • npm run build for building the production version.
      • npm run start for running the production version.
      These scripts use Next.js CLI commands, detailed along with their relevant parameters. Customize your npm scripts as needed.
      Next, we’ll dive into routing and explore the revolutionary App Route feature in Next.js v14. As you learn, be sure to write demos and test frequently to solidify your understanding!