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
      Introduction

      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.

      Introduction

      
      Routing is an essential part of any Next.js application. Within Next.js, the router dictates how pages are rendered and how requests are handled.
      Next.js provides two routing methods: the "Pages Router" and the "App Router". Both methods are compatible with Next.js, though starting with version 13.4, the App Router has become the default. New projects are encouraged to adopt this updated routing solution.
      
      In this chapter, we'll delve into how to define routes and understand common file conventions under the App Router.
      

      1. File-System Based Routing

      
      Next.js uses a file-system-based approach for routing, meaning that a file can serve as a route. For instance, creating an index.jsfile in the pages directory will map directly to the root route /:
      // pages/index.js
      import React from 'react'
      export default () => <h1>Hello world</h1>
      
      Similarly, an about.js file in the same directory maps to the /about route:
      // pages/about.js
      import React from 'react'
      export default () => <h1>About us</h1>
      

      2. Transition from Pages Router to App Router

      
      When you create a project with create-next-app, you may notice the absence of a pages directory by default. If your Next.js version is 13.4 or higher, you're using the new App Router.
      
      Next.js introduced the App Router in version 13 and stabilized it by version 13.4, providing enhanced features, performance improvements, and more flexible code organization. Moving forward, the App Router is the recommended routing method.
      
      But why did Next.js make this shift? Under the old system, declaring a route required creating a file in the pages directory, leading to a structure like this:
      └── pages
          ├── index.js
          ├── about.js
          └── more.js
      One limitation was that all .js files in the pages directory were treated as route files, which meant components couldn't be placed there—a constraint for developers.
      
      In contrast, the App Router organizes routes differently, as shown below:
      src/
      └── app
          ├── page.js 
          ├── layout.js
          ├── template.js
          ├── loading.js
          ├── error.js
          └── not-found.js
          ├── about
          │   └── page.js
          └── more
              └── page.js
      This structure allows for specific files like layout.js for layouts, template.js for templates, loading.js for loading states, error.js for error handling, and not-found.js for 404 pages. This improved convention aids in better code organization and management. Throughout this chapter, we'll examine the functions and details of these files.
      

      3. Using Pages Router

      
      You can still utilize the Pages Router by creating a pages folder in either the src directory or the root directory. The .js files inside will be treated as Pages Router files.
      
      Note that while both routing methods can coexist, the App Router takes precedence. If both routers resolve to the same URL, it will result in a build error.
      
      When consulting the official Next.js documentation, you'll find options for App and Pages in the upper left corner, corresponding to the App Router and Pages Router.
      
      Given the significant differences in usage between the two, ensure you choose the correct routing mode when looking for information.