What is Next.js?

• Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

• Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.

• Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications. 😉

Agenda

• 1. Installation
• 2. Pages and Layouts

1. Installation

System Requirements:

• Node.js 18.17 or later.
• macOS, Windows (including WSL), and Linux are supported.

Automatic Installation: We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you.

npx create-next-app@latest    #To create a project

On installation, you'll see the following prompts:

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
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

If you're new to Next.js, see the project structure docs for an overview of all the possible files and folders in your application.

Manual Installation

npm install next@latest react@latest react-dom@latest   

# To manually create a new Next.js app
# install the required packages

Run the Development Server

• Run npm run dev to start the development server.
• Visit http://localhost:3000 to view your application.
• Edit app/page.tsx (or pages/index.tsx) file and save it to see the updated result in your browser.

2. Pages and Layouts

A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.

For example, to create your index page, add the page.js file inside the app directory:

// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

Then, to create further pages, create a new folder and add the page.js file inside it. For example, to create a page for the /dashboard route, create a new folder called dashboard, and add the page.js file inside it:

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}