Next.js Getting Started Guide

1. How to Install Node.js

Node.js is required to run Next.js applications. Follow these steps to install Node.js:

Visit the official Node.js website
Download the LTS (Long Term Support) version (recommended for most users)
Run the installer and follow the installation wizard
Verify installation by opening a terminal/command prompt and running:
bash
```
1node --version
```

Alternatively, you can use a version manager like nvm (Node Version Manager) to install and manage multiple Node.js versions.

2. How to Install Next.js 15.2, React 19, and Tailwind v4

Create a new Next.js project with the latest features using the following command:

bash

1npx create-next-app@latest

You'll be prompted with several options:

bash

1What is your project named? my-app
2Would you like to use TypeScript? Yes
3Would you like to use ESLint? Yes
4Would you like to use Tailwind CSS? Yes
5Would you like your code inside a `src/` directory? No
6Would you like to use App Router? (recommended) Yes
7Would you like to use Turbopack for `next dev`? Yes
8Would you like to customize the import alias (@/* by default)? Yes
9What import alias would you like configured? @/*

After the installation completes, navigate to your project directory:

bash

1cd my-app

Start the development server:

bash

1npm run dev

Your Next.js application will be running at http://localhost:3000.

3. App Folder Structure Explanation

The App Router in Next.js 15 uses a folder-based routing system. Here's the basic structure:

Folder Structure

1my-app/
2├── app/
3│   ├── favicon.ico
4│   ├── globals.css
5│   ├── layout.tsx      # Root layout (applies to all routes)
6│   ├── page.tsx        # Home page (/)
7│   └── about/          # Route segment for /about
8│       └── page.tsx    # About page (/about)
9├── components/         # Reusable components
10├── public/             # Static assets
11├── next.config.mjs     # Next.js configuration
12├── package.json        # Project dependencies
13├── tailwind.config.ts  # Tailwind CSS configuration
14└── tsconfig.json       # TypeScript configuration

Key directories and files:

app/: Contains all routes, layouts, and pages
components/: Reusable UI components
public/: Static files like images and fonts
next.config.mjs: Configuration options for Next.js

4. Where to Start Editing

To start editing your Next.js application:

Open the project in your favorite code editor (VS Code recommended)
Navigate to app/page.tsx - this is your home page
Make changes to the file and save - the browser will automatically update

The development server provides hot module replacement, so you'll see your changes immediately without refreshing the page.

5. Explanation of page.tsx and layout.tsx

page.tsx

This file defines the unique content for a route. It's the primary UI component for a specific route.

bash

1page.tsx

typescript

1// app/page.tsx
2export default function Home() {
3  return (
4    <main>
5      <h1>Welcome to my Next.js application</h1>
6      <p>This is the home page</p>
7    </main>
8  )
9}

layout.tsx

This file defines shared UI for a segment and its children. Layouts don't re-render when navigating between pages that share the layout.

bash

1layout.tsx

typescript

1// app/layout.tsx
2export default function RootLayout({
3  children,
4}: {
5  children: React.ReactNode
6}) {
7  return (
8    <html lang="en">
9      <body>
10        <header>My Website</header>
11        {children}
12        <footer>© 2025</footer>
13      </body>
14    </html>
15  )
16}

The children prop represents the page content or nested layouts. The root layout must contain html and body tags.

6. What is globals.css

globals.css is a stylesheet that applies to all routes in your application. It's imported in the root layout.

css

1/* app/globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6/* @import "tailwindcss"; */
7/* for Tailwind v4+ */
8
9
10:root {
11  --foreground-rgb: 0, 0, 0;
12  --background-rgb: 255, 255, 255;
13}
14
15body {
16  color: rgb(var(--foreground-rgb));
17  background: rgb(var(--background-rgb));
18}
19
20/* Add your global styles here */

With Tailwind CSS, the file includes the necessary Tailwind directives. You can add custom global styles here that should apply throughout your application.

7. Example of Creating and Importing a Component

Create a new file in the components directory:

bash

1// components/button.tsx
2interface ButtonProps {
3  text: string;
4  onClick?: () => void;
5}
6
7export default function Button({ text, onClick }: ButtonProps) {
8  return (
9    <button 
10      onClick={onClick}
11      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
12    >
13      {text}
14    </button>
15  );
16}

Import and use the component in a page:

bash

1// app/page.tsx
2import Button from '@/components/button';
3
4export default function Home() {
5  return (
6    <main className="p-8">
7      <h1 className="text-2xl font-bold mb-4">Welcome to my app</h1>
8      <Button text="Click me" />
9    </main>
10  );
11}

The @/ alias points to the root of your project, making imports cleaner and more consistent.

8. Routing and Pages with Example

Next.js App Router uses a file-system based routing mechanism where:

Folders define routes
page.tsx files make routes publicly accessible
Nested folders create nested routes

Example:

To create a blog section with individual post pages:

bash

1app/
2├── page.tsx         # Home page (/)
3└── blog/
4    ├── page.tsx     # Blog index page (/blog)
5    └── [slug]/      # Dynamic route segment
6        └── page.tsx # Individual blog post page (/blog/post-1)

Blog index page:

bash

1// app/blog/page.tsx
2import Link from 'next/link';
3
4export default function BlogPage() {
5  const posts = [
6    { id: 1, slug: 'hello-world', title: 'Hello World' },
7    { id: 2, slug: 'next-js-15', title: 'What's New in Next.js 15' },
8  ];
9
10  return (
11    <div className="p-8">
12      <h1 className="text-3xl font-bold mb-6">Blog Posts</h1>
13      <ul className="space-y-4">
14        {posts.map(post => (
15          <li key={post.id}>
16            <Link 
17              href={`/blog/${post.slug}`}
18              className="text-blue-600 hover:underline text-lg"
19            >
20              {post.title}
21            </Link>
22          </li>
23        ))}
24      </ul>
25    </div>
26  );
27}

Individual blog post page (dynamic route):

bash

1// app/blog/[slug]/page.tsx
2export default function BlogPost({ params }: { params: { slug: string } }) {
3  return (
4    <article className="p-8 max-w-2xl mx-auto">
5      <h1 className="text-3xl font-bold mb-4">Post: {params.slug}</h1>
6      <p>This is the content of the blog post with slug: {params.slug}</p>
7    </article>
8  );
9}

The [slug] folder creates a dynamic route segment that captures any value in that position of the URL and passes it as the params.slug prop to the page component.