Lesson One: Introduction to Next.js and Setting Up the Environment

What is Next.js?

Next.js is an open-source framework for building web applications using React.js. It was designed by Vercel and aims to simplify the process of building modern, advanced web applications with features like fast page loading, SEO optimization, and support for SSR (Server-Side Rendering) and SSG (Static Site Generation) .

Key Advantages of Next.js:

• SSR (Server-Side Rendering): Allows you to render pages directly from the server, improving SEO performance.
• SSG (Static Site Generation): Enables the creation of static pages at build time, making them extremely fast.
• Automatic URL Routing: You can create pages based on the file structure.
• CSS-in-JS: Provides built-in tools for managing styles.
• API Routes: You can create APIs within your project without needing a separate server.
• Performance Optimization: Includes features like Code Splitting and Automatic Image Optimization .

Why Should You Learn Next.js?

• If you want to build modern, fast web applications, Next.js is the ideal choice.
• It helps you improve both user experience and SEO performance.
• It is widely used by large companies like Netflix, TikTok, and Twitter.
• It provides powerful tools to save time and effort during development.

Setting Up the Environment

Step 1: Installing Node.js and NPM

Before starting with Next.js, you need to install Node.js and NPM (Node Package Manager) on your machine. You can download Node.js from the following link: https://nodejs.org/ .

To verify that Node.js and NPM are installed, open your Terminal or Command Prompt and run the following commands:

node -v
npm -v

If the versions appear, it means Node.js and NPM have been successfully installed.

Step 2: Creating a New Next.js Project

To create a new Next.js project, use the following command:

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

my-next-app is the name of the project. You can change it to any name you prefer. After running the command, a project folder will be created, and all necessary dependencies will be downloaded.

Step 3: Navigating to the Project Folder

After creating the project, navigate to the project folder using the following command:

cd my-next-app

Step 4: Running the Project

To run the local project, use the following command:

npm run dev

The server will start on the following address: http://localhost:3000

Understanding the Basic Project Structure

After running the project, let’s take a look at the basic structure of the project:

• pages/ : Contains page files. Each file in this folder represents a page in your application.
• public/ : Contains static files like images and other assets that can be accessed directly.
• styles/ : Contains style files (CSS).
• next.config.js : The main configuration file for your Next.js project.

Experimenting with the Project

Open the pages/index.js file in your project. This is the file that displays the homepage. You can modify the text in it to see the changes live.

For example, change the code to:

export default function Home() {
return (
<div>
<h1>Welcome to Learning Next.js!</h1>
<p>This is the homepage.</p>
</div>
);
}

After saving, you’ll notice that the changes appear instantly in the browser thanks to the amazing "Hot Reloading" feature.

Conclusion of Lesson One

In this lesson, we learned about Next.js, why it’s important, and how to set up your working environment. In the next lesson, we’ll discuss how to create multiple pages and use links between them.

See you in Lesson Two! 🚀