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
      APP Router

      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.

      APP Router

      
      Let's delve into the App Router by first defining routes.
      
      In Next.js, folders serve as route definitions, where each folder segment corresponds to a URL fragment. To create nested routes, simply create nested folders. For instance, the directory app/dashboard/settings corresponds to the route /dashboard/settings.
      
      

      Defining Pages

      
      To ensure a route is accessible, you need a special file named page.js. This naming convention, while standard, can be customized (e.g., index.js or anything.js ).
      
      For example:
      • app/page.js corresponds to the route /
      • app/dashboard/page.js corresponds to the route /dashboard
      • app/dashboard/settings/page.js corresponds to the route /dashboard/settings
      Without a page.js file in a directory, there is no corresponding route, making such folders useful for storing components, stylesheets, images, or other files. Next.js supports .js, .jsx, and .tsx files, allowing for a variety of formats.
      A basic page.js might look like this:
      // app/page.js
      export default function Page() {
        return <h1>Hello, Next.js!</h1>
      }
      Visiting http://localhost:3000/ will display "Hello, Next.js!".
      

      Defining Layouts

      
      Layouts are UI components shared across multiple pages, retaining state and interactivity without re-rendering. To create a layout, use a file named layout.js that exports a React component receiving a children prop.
      
      For instance:
      // app/dashboard/layout.js
      export default function DashboardLayout({ children }) {
        return (
          <section>
            <nav>nav</nav>
            {children}
          </section>
        );
      }
      
      // app/dashboard/page.js
      export default function Page() {
        return <h1>Hello, Dashboard!</h1>;
      }
      Visiting /dashboard shows "nav" from app/dashboard/layout.js and "Hello, Dashboard!" from app/dashboard/page.js.
      
      Layouts can nest. For example, app/dashboard/settings/page.js:
      // app/dashboard/settings/page.js
      export default function Page() {
        return <h1>Hello, Settings!</h1>;
      }
      Visiting /dashboard/settings shows "nav" from app/dashboard/layout.js and "Hello, Settings!" from app/dashboard/settings/page.js.
      

      Root Layout

      
      The topmost layout is the root layout, located in app/layout.js, and applies to all routes. It must contain html and body tags and is required for the app directory.
      
      A default root layout might look like this:
      // app/layout.js
      import './globals.css';
      import { Inter } from 'next/font/google';
      
      const inter = Inter({ subsets: ['latin'] });
      
      export const metadata = {
        title: 'Create Next App',
        description: 'Generated by create next app',
      };
      
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <body className={inter.className}>{children}</body>
          </html>
        );
      }
      
      Key points:
      • app/layout.js is mandatory.
      • It must include html and body tags.
      • Avoid direct modifications to these tags; use the Metadata section for guidance.
      • Multiple root layouts can be created using route groups.
      • The default root layout is a server component and cannot be a client component.
      

      Playground

      
      app/
      ├── (marketing)                     # Marketing section
      │   ├── blog                        # Blog route segment
      │   │   └── page.tsx                # Blog page (/blog)
      │   ├── layout.tsx                  # Layout file for the marketing section, shared across marketing section
      │   └── page.tsx                    # Main entry for the application (/)
      └── dashboard                       # Dashboard section
          ├── settings                    # Settings route segment
          │   └── page.tsx                # Settings page (/dashboard/settings)
          ├── layout.tsx                  # Layout file for the dashboard, shared across dashboard section
          └── page.tsx                    # Dashboard page (/dashboard)