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
      404 Page

      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.

      404 Page

      
      Finally, let's dive into a special file in Next.js: not-found.js. This file displays content when a route doesn't exist.
      
      By default, a Next.js project has a built-in 404 page, it looks like this:
      
      
      You can customize it by creating a not-found.js file in the app directory with the following code:
      import Link from 'next/link';
      
      export default function NotFound() {
        return (
          <div className="flex min-h-screen flex-col items-center justify-center space-y-4">
            <h2 className="text-3xl font-semibold">404 Not Found</h2>
            <p>Could not find requested page</p>
            <Link className="underline text-gray-500" href="/">
              Return Home
            </Link>
          </div>
        );
      }
      
      This code makes your 404 page look like this:
      
      The app/not-found.js file is triggered in two scenarios:
      1. When a component throws a notFound function.
      2. When a route address doesn't match any existing routes.
      

      Playground

      
      Try to navigate the rout with something not existed (xxx/aaa)
      
      
      If you place not-found.js in any subdirectory, it can only be triggered manually by the notFound function. For example:
      // /dashboard/blog/page.js
      import { notFound } from 'next/navigation'
      
      export default function Page() {
        notFound()
        return <></>
      }
      
      When the notFound function is executed, the nearest not-found.js file handles it. If an unmatched route is accessed, it's handled by app/not-found.js.
      
      In practical development, when fetching user data or article data that doesn't exist, you can throw the notFound function to render the custom not-found.js page.
      
      Here's an example:
      // app/dashboard/blog/[id]/page.js
      import { notFound } from 'next/navigation'
       
      async function fetchUser(id) {
        const res = await fetch('https://...')
        if (!res.ok) return undefined
        return res.json()
      }
       
      export default async function Profile({ params }) {
        const user = await fetchUser(params.id)
       
        if (!user) {
          notFound()
        }
       
        // ...
      }
      Note: We'll later discuss "route groups." Using app/not-found.js with route groups might introduce issues. For more details, refer to "How to Customize Different 404 Pages for Multiple Root Layouts in Next.js v14? "
      

      Summary

      
      Congratulations on completing this section! 👏 👏
      We explored Next.js's file-based routing solution, the App Router. We covered special files used to define pages (page.js), layouts (layout.js), templates (template.js), loading UI (loading.js), error handling (error.js), and 404 pages (not-found.js).
      
      Here's the App Router structure
      src/
      └── app
          ├── page.js 
          ├── layout.js
          ├── template.js
          ├── loading.js
          ├── error.js
          └── not-found.js
          ├── about
          │   └── page.js
          └── more
              └── page.js
      This structure helps organize and manage code effectively.
      
      Do you now have a deeper understanding? 🤔 This is just a small part of Next.js's powerful routing capabilities. In the next section, we'll continue learning.