Create a Next.js application

Introduction: What is Next.js and Why Use It?

Welcome, future Full-Stack Developer! Are you ready to build incredibly fast, SEO-friendly, and highly scalable web applications? Then you’re in the right place! In this lesson, we’ll dive into Next.js, a powerful React framework that makes full-stack development a breeze.

Next.js extends React’s capabilities, providing a robust structure and features like Server-Side Rendering (SSR), Static Site Generation (SSG), and API Routes right out of the box. This means you can build a complete, production-ready application with both frontend and backend logic using a single framework. It’s designed to give you the best developer experience with all the performance benefits modern web applications need.

Let’s get your first Next.js project up and running!

Prerequisites

Before we begin, please ensure you have the following installed on your system:

• Node.js: Version 18.17 or later. You can download it from nodejs.org.
• npm (Node Package Manager) or Yarn/pnpm: These come bundled with Node.js. We’ll primarily use npm in our examples.
• A Code Editor: Visual Studio Code (VS Code) is highly recommended for its excellent React and TypeScript support.

You can verify your Node.js installation by opening your terminal or command prompt and typing:

node -v
npm -v

If you see version numbers, you’re good to go!

Getting Started: Your First Next.js App

Step 1: Creating Your Next.js Application

The easiest way to start a new Next.js project is by using create-next-app. This command sets up a new Next.js project with all the necessary configurations, including a basic project structure and dependencies.

Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command:

npx create-next-app@latest my-next-app

What this command does:

• npx: Executes a package without installing it globally. It’s great for one-off commands like creating new projects.
• create-next-app@latest: Specifies that we want to use the latest version of the Next.js app creation tool.
• my-next-app: This will be the name of your new project directory. Feel free to replace my-next-app with any name you prefer for your project.

The installer will ask you a few questions. For this lesson, you can choose the following options:

• Would you like to use TypeScript? Yes (Recommended for type safety)
• Would you like to use ESLint? Yes (For code quality)
• Would you like to use Tailwind CSS? No (We’ll keep styling simple for now)
• Would you like to use `src/` directory? No (Let’s stick to the root for simplicity)
• Would you like to use App Router? (recommended) Yes (This is the modern routing approach in Next.js)
• Would you like to customize the default import alias? No

Once you’ve answered the questions, create-next-app will install all the required packages. This might take a minute or two.

Step 2: Navigating into Your Project Directory

After the installation is complete, you’ll have a new directory named my-next-app (or whatever you named it). You need to move into this directory to work on your project.

cd my-next-app

What this command does:

• cd: Stands for “change directory.” It’s a fundamental command-line utility used to change the current working directory.
• my-next-app: The name of the new directory created by create-next-app.

Your terminal prompt should now reflect that you are inside the my-next-app directory.

Step 3: Running Your Development Server

Now that you’re inside your project, let’s start the development server. This server compiles your code, provides live reloading, and allows you to see your application in action in your browser.

npm run dev

What this command does:

• npm run dev: Executes the dev script defined in your project’s package.json file. This script typically runs the Next.js development server.

You’ll see output in your terminal indicating that the server has started, usually on http://localhost:3000. Open your web browser and navigate to this address. You should see the default Next.js welcome page!

Understanding the Initial Project Structure

Let’s take a quick look at the main files and folders that create-next-app generated. Open your my-next-app project in your code editor (like VS Code).

Here’s a breakdown of some key parts:

• app/: This is the heart of your Next.js application using the App Router. Each folder inside app represents a route segment. For example, app/blog/page.tsx would correspond to the /blog route.
• public/: This folder is for static assets like images, fonts, or other files that need to be served directly. Files placed here are accessible from the root of your domain (e.g., /my-image.png).
• node_modules/: Contains all the project’s dependencies (libraries and packages) installed by npm. You generally don’t need to touch this folder directly.
• package.json: This file lists your project’s metadata, scripts (like dev, build, start), and all its dependencies.
• next.config.js: A configuration file for Next.js. You can customize various aspects of your Next.js application here.
• README.md: A markdown file providing a brief introduction to your project.

Take a moment to explore these files and folders in your editor. Understanding this structure is crucial as you build more complex applications.

Exploring app/page.tsx: Your First Page

The app/page.tsx file is special in Next.js’s App Router. It represents the root page of your application (the / URL). Let’s look at the default code it contains:

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js</h1>
      <p>Build fast web applications.</p>
    </main>
  );
}

What this code does:

• export default function HomePage() { ... }: This defines a React functional component named HomePage and exports it as the default export. In Next.js, any file named page.tsx (or page.js) that exports a default React component will be treated as a page for its respective route segment.
• return (...): A React component must return JSX (JavaScript XML). JSX is a syntax extension for JavaScript that allows you to write HTML-like structures directly within your JavaScript code.
• <main>...</main>: This is a standard HTML5 semantic element. Inside it, we have an <h1> (heading) and a <p> (paragraph) tag, displaying the content you saw in your browser.

Next.js intelligently uses the file system to define your routes. So, app/page.tsx maps to /, app/about/page.tsx would map to /about, and so on. This is known as file-system based routing, making it very intuitive to organize your application’s pages.

Practice Exercise: Make It Your Own!

It’s time to get hands-on and customize your Next.js application!

1. Task 1: Modify the Home Page

   Open app/page.tsx in your editor. Change the heading and add a new paragraph with some information about yourself or what you’re excited to build with Next.js.

   Example modification:

   export default function HomePage() {
     return (
       <main>
         <h1>Hello, FullStackDost Learner!</h1>
         <p>I'm excited to build my first full-stack application with Next.js!</p>
         <p>This is a paragraph I added myself.</p>
       </main>
     );
   }

   Save the file and check your browser (http://localhost:3000). The changes should appear instantly thanks to Next.js’s Fast Refresh!

2. Task 2: Create a New ‘About’ Page

   Let’s create a new page for your application.

   • Inside the app/ directory, create a new folder named about.
   • Inside the new app/about/ folder, create a new file named page.tsx.
   • Add the following code to app/about/page.tsx:

   export default function AboutPage() {
     return (
       <main>
         <h1>About Us</h1>
         <p>This is the About page for my Next.js application.</p>
         <p>FullStackDost is helping me master full-stack development.</p>
       </main>
     );
   }

   Save this file. Now, open your browser and navigate to http://localhost:3000/about. You should see your newly created About page!

3. Task 3: Add Navigation Link

   To make it easier to navigate, let’s add a link from your Home page to your About page.

   • Open app/page.tsx again.
   • Import the Link component from next/link.
   • Add a <Link> component somewhere on your Home page, pointing to /about.

   Example modification for app/page.tsx:

   import Link from 'next/link'; // Import the Link component
   export default function HomePage() {
     return (
       <main>
         <h1>Hello, FullStackDost Learner!</h1>
         <p>I'm excited to build my first full-stack application with Next.js!</p>
         <p>This is a paragraph I added myself.</p>
         <p><Link href="/about">Go to About Page</Link></p> {/* Add this link */}
       </main>
     );
   }

   Save the file, and now you can click the link on your Home page to navigate to the About page without a full page reload!

Summary

Congratulations! You’ve successfully created your first Next.js application, understood its basic structure, run the development server, and even created a new page with navigation. You’re now equipped with the foundational knowledge to start building dynamic and powerful web experiences with Next.js.

Keep exploring the files, experimenting with changes, and building upon this foundation. The world of full-stack development with Next.js awaits!