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
      Project Setup

      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.

      Instruction

      
      Welcome to the world of Next.js! 👏
      Before we dive into specific topics, let’s start by setting up a Next.js project. Having a working project from the get-go will help you debug and grasp the concepts more effectively.
      Next.js simplifies this with the create-next-app scaffold, which supports TypeScript, ESLint, and more, providing automatic compilation and bundling with no configuration needed.
      
      In this chapter, we'll cover two methods for creating a project: CLI and manual. We'll also go over common script commands used in development and delve into the next commands, explaining their functions and optional parameters.

      1. Create Project with CLI

      

      1.1 Requirements

      This guide is based on the latest version, v14, and requires Node.js 18.17 or later. It's compatible with macOS, Windows, and Linux.

      1.2 Create a Project

      The fastest way to set up a Next.js project is with the create-next-app scaffold. Just run:
      npx create-next-app@latest
      
      You'll be prompted to name your project and decide whether to use TypeScript, enable ESLint, use Tailwind CSS, and more. Make your choices based on your preferences. If you're unsure, the default options are a safe bet. We'll discuss these choices in more detail as we progress through the guide.
      Note: To keep things straightforward, the examples in this guide will not use TypeScript. For those interested in TypeScript, check out my translation of the latest official TypeScript documentation.
      
      Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
      If you are not using npx, you can also use yarn, pnpm, bunx.
      yarn create next-app
      pnpm create next-app
      bunx create-next-app
      

      1.3 Run Project

      To run your project, start by examining the package.json file located in the root directory. Here are the script commands you'll find:
      "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
      }
      These scripts are essential for different stages of your project: dev for development, build for creating the production build, start for running the production build, and lint for checking code quality.
      
      For development, run:
      npm run dev
      When you're ready to deploy, build the production code with:
      npm run build
      Then, to run the production project, use:
      npm run start
      To perform ESLint syntax checks, execute:
      npm run lint
      
      To launch the project, run npm run dev. This will start the project on port 3000. Open your browser and navigate to http://localhost:3000/.
      
      If you see the specified content, it means your project is running successfully. For an uninterrupted learning experience, consider using incognito mode to avoid browser plugin interference.

      1.4 Example Code

      Next.js offers a variety of example codes such as with-redux, api-routes-cors, with-electron, with-jest, with-markdown, with-material-ui, and with-mobx. These examples showcase different use cases of Next.js. You can explore these examples at Next.js GitHub examples.
      To directly use an example like with-redux, you can create a project with:
      npx create-next-app --example with-redux your-app-name
      Note: Using example codes will skip prompts for options like TypeScript or ESLint, proceeding directly to project creation and dependency installation.
      

      2. Manual

      
      Creating a Next.js project manually isn't usually necessary, but knowing how to do it can help you understand the fundamental dependencies of a basic Next.js setup.

      2.1 Create a Folder and Install Dependencies

      First, create a directory named next-app-manual and navigate into it:
      cd next-app-manual
      Then, install the required dependencies:
      npm install next@latest react@latest react-dom@latest
      Running this command will generate a package.json file and install the dependencies.

      2.2 Add Scripts

      Next, open the package.json file and insert the following script definitions:
      {
        "scripts": {
          "dev": "next dev",
          "build": "next build",
          "start": "next start",
          "lint": "next lint"
        }
      }

      2.3 Create Directories

      Within the next-app-manual directory, create an app folder. Inside this folder, create layout.js and page.js files with the following code:
      // app/layout.js
      export default function RootLayout({ children }) {
        return (
          <html lang="en">
            <body>{children}</body>
          </html>
        );
      }
      // app/page.js
      export default function Page() {
        return <h1>Hello, Next.js!</h1>;
      }

      2.4 Run the Project

      Finally, to start the project, use the following command:
      npm run dev
      If everything is set up correctly, you should see your project running.