Getting Started with Next.js Full-Stack Development: Building a Modern Web App from Scratch

Table of Contents

1235 words

6 minutes

Getting Started with Next.js Full-Stack Development: Building a Modern Web App from Scratch

2026-06-17

Frontend

Next.js

/

React

/

Full-Stack

/

SSR

/

Frontend Fundamentals

1. Introduction#

Next.js is currently the most popular React full-stack framework. It extends React’s component-based capabilities to the server side, allowing you to write frontend pages and backend APIs in the same project.

Recalling the three rendering modes (CSR / SSR / SSG) we discussed in the previous article, what makes Next.js unique is: it allows these three modes to work seamlessly together in the same project — you can decide the rendering strategy on a per-page basis.

2. Creating Your First Next.js Project#

2.1 Initialization#

1
npx create-next-app@latest my-blog
2
cd my-blog
3
npm run dev

The initialization wizard will ask you a few questions:

1
✔ Would you like to use TypeScript?     Yes
2
✔ Would you like to use ESLint?         Yes
3
✔ Would you like to use Tailwind CSS?   Yes
4
✔ Would you like to use App Router?     Yes (recommended)

After starting, visit http://localhost:3000, and your first Next.js project is up and running.

2.2 Project Structure#

1
my-blog/
2
├── app/                  #App Router's core directories
3
│   ├── layout.tsx        #Root layout (shared by all pages)
4
│   ├── page.tsx          #Home page /
5
│   ├── about/
6
│   │   └── page.tsx      # /about
7
│   ├── blog/
8
│   │   ├── page.tsx      # /blog
9
│   │   └── [slug]/
10
│   │       └── page.tsx  # /blog/hello-world
11
│   └── api/
12
│       └── posts/
13
│           └── route.ts  # /api/posts
14
├── components/           #Shared components
15
├── lib/                  #Utility functions
16
├── public/               #Static assets
17
├── package.json
18
└── next.config.ts

Core rule: the file system is the router. The folder structure under the app/ directory maps directly to URL paths.

3. App Router: Files as Routes#

3.1 Basic Conventions#

File	Purpose
`page.tsx`	Page content
`layout.tsx`	Layout (wraps child pages, preserves state when switching pages)
`loading.tsx`	Loading UI (automatically wraps `Suspense`)
`error.tsx`	Error handling UI (automatically wraps `ErrorBoundary`)
`not-found.tsx`	404 page
`route.ts`	API routes (pure backend)

3.2 Routing Example#

1
app/
2
├── page.tsx                  → /
3
├── about/page.tsx            → /about
4
├── blog/page.tsx             → /blog
5
├── blog/[slug]/page.tsx      → /blog/hello, /blog/world
6
└── dashboard/
7
    ├── layout.tsx            → dashboard shared layout
8
    ├── page.tsx              → /dashboard
9
    └── settings/page.tsx     → /dashboard/settings

3.3 Dynamic Routes and Parameters#

1
export default async function BlogPost({
2
    params,
3
}: {
4
    params: Promise<{ slug: string }>;
5
}) {
6
    const { slug } = await params;
7
    const post = await getPost(slug);
8

9
    return (
10
        <article>
11
            <h1>{post.title}</h1>
12
            <p>{post.content}</p>
13
        </article>
14
    );
15
}

URL /blog/hello-world → slug = "hello-world".

4. Server Components vs Client Components#

Next.js 13+ introduced React Server Components (RSC), which is the key to understanding modern Next.js.

4.1 Server Components by Default#

1
//✅ This is a Server Component (default)
2
//Can directly access the database and file system
3
import { db } from '@/lib/db';
4

5
export default async function PostList() {
6
    const posts = await db.post.findMany(); //Query the database directly!
7

8
    return (
9
        <ul>
10
            {posts.map(post => (
11
                <li key={post.id}>{post.title}</li>
12
            ))}
13
        </ul>
14
    );
15
}

4.2 Use Client Components When Interactivity Is Needed#

1
'use client'; //← Add this line to make it a Client Component
2

3
import { useState } from 'react';
4

5
export default function LikeButton() {
6
    const [likes, setLikes] = useState(0);
7

8
    return (
9
        <button onClick={() => setLikes(likes + 1)}>
10
            ❤️ {likes} likes
11
        </button>
12
    );
13
}

4.3 When to Use Which?#

Requirement	Which Component to Use
Fetching data from a database	Server Component
Displaying static content	Server Component
Handling user interactions (onClick, onChange…)	Client Component
Using state (useState, useReducer)	Client Component
Using browser APIs (localStorage, window)	Client Component
Using Effects (useEffect)	Client Component

Best practice: use Server Components as much as possible, and only add client-side interactivity where necessary. This minimizes the JS bundle sent to the client and achieves optimal performance.

5. Data Fetching#

5.1 Fetching Directly in Server Components#

1
//No need for useEffect + useState, just async/await directly
2
export default async function PostsPage() {
3
    const posts = await fetch('https://api.example.com/posts', {
4
        next: { revalidate: 3600 }, //ISR: revalidate every hour
5
    }).then(res => res.json());
6

7
    return (
8
        <div>
9
            {posts.map(post => (
10
                <article key={post.id}>
11
                    <h2>{post.title}</h2>
12
                    <p>{post.excerpt}</p>
13
                </article>
14
            ))}
15
        </div>
16
    );
17
}

5.2 Next.js Enhances fetch#

Next.js extends the native fetch API with cache control:

1
//Caching, default behavior (similar to SSG)
2
fetch('/api/data');
3

4
//Refetch on every request (similar to SSR)
5
fetch('/api/data', { cache: 'no-store' });
6

7
//Timed revalidation (ISR — Incremental Static Regeneration)
8
fetch('/api/data', { next: { revalidate: 60 } }); //60 seconds

5.3 Using ORMs to Interact with the Database Directly#

Because Server Components run on the server, you can directly use ORMs like Prisma, Drizzle, etc.:

1
import { prisma } from '@/lib/prisma';
2

3
export default async function UsersPage() {
4
    const users = await prisma.user.findMany({
5
        orderBy: { createdAt: 'desc' },
6
    });
7

8
    return (
9
        <table>
10
            <thead>
11
                <tr><th>Name</th><th>Email</th></tr>
12
            </thead>
13
            <tbody>
14
                {users.map(user => (
15
                    <tr key={user.id}>
16
                        <td>{user.name}</td>
17
                        <td>{user.email}</td>
18
                    </tr>
19
                ))}
20
            </tbody>
21
        </table>
22
    );
23
}

6. API Routes: Writing Backend Endpoints#

Next.js isn’t just a frontend framework — it can also write backend APIs:

6.1 Creating an API Endpoint#

1
import { NextResponse } from 'next/server';
2

3
// GET /api/posts
4
export async function GET() {
5
    const posts = await prisma.post.findMany();
6
    return NextResponse.json(posts);
7
}
8

9
// POST /api/posts
10
export async function POST(request: Request) {
11
    const body = await request.json();
12
    const post = await prisma.post.create({ data: body });
13
    return NextResponse.json(post, { status: 201 });
14
}

6.2 Dynamic API Routes#

1
export async function GET(
2
    request: Request,
3
    { params }: { params: Promise<{ id: string }> }
4
) {
5
    const { id } = await params;
6
    const post = await prisma.post.findUnique({ where: { id } });
7

8
    if (!post) {
9
        return NextResponse.json(
10
            { error: 'Article not found' },
11
            { status: 404 }
12
        );
13
    }
14

15
    return NextResponse.json(post);
16
}
17

18
export async function DELETE(
19
    request: Request,
20
    { params }: { params: Promise<{ id: string }> }
21
) {
22
    const { id } = await params;
23
    await prisma.post.delete({ where: { id } });
24
    return NextResponse.json({ success: true });
25
}

6.3 Server Actions: Another “Backend” Approach#

Next.js also provides Server Actions — you can call server-side functions directly in forms without manually creating an API:

1
'use server';
2

3
import { prisma } from '@/lib/prisma';
4
import { revalidatePath } from 'next/cache';
5

6
export async function createPost(formData: FormData) {
7
    const title = formData.get('title') as string;
8
    const content = formData.get('content') as string;
9

10
    await prisma.post.create({
11
        data: { title, content },
12
    });
13

14
    revalidatePath('/posts'); //Refresh cache
15
}

1
import { createPost } from '@/app/actions';
2

3
export default function NewPostPage() {
4
    return (
5
        <form action={createPost}>
6
            <input name="title" placeholder="Title" required />
7
            <textarea name="content" placeholder="Content" required />
8
            <button type="submit">Publish</button>
9
        </form>
10
    );
11
}

7. Rendering Strategy in Practice#

Next.js supports choosing rendering strategies at the page level:

1
//1. SSG (default) — generated at build time, never changes
2
export default function AboutPage() {
3
    return <div>About Us</div>;
4
}
5

6
//2. ISR — generated at build time, refreshed on a schedule
7
export const revalidate = 3600; //Regenerate every 3600 seconds
8

9
//3. SSR — regenerated on every request
10
export const dynamic = 'force-dynamic';
11

12
//4. Dynamic SSG — pre-generate a page for each data entry
13
export async function generateStaticParams() {
14
    const posts = await getPosts();
15
    return posts.map(post => ({ slug: post.slug }));
16
}

8. Deployment#

The most natural deployment platform for Next.js is Vercel (the creator of Next.js), but it can also be deployed to any environment that supports Node.js:

1
#Production build
2
npm run build
3

4
#Start the production server
5
npm run start

Deployment Method	Characteristics
Vercel	Zero config, automatic optimization, global CDN
Docker	Containerized deployment, suitable for self-hosting
Node.js Server	Traditional approach, `next start`
Static Export	`next export`, pure static files served from CDN

9. Suggested Learning Path#

Stage	Content	Key Concepts
Beginner	Creating projects, page routing, basic components	App Router conventions
Intermediate	Server Components, data fetching, API Routes	RSC, caching strategies
Practical	Authentication (NextAuth), database (Prisma), forms	Server Actions
Advanced	Middleware, internationalization, performance optimization, error monitoring	Edge Runtime

10. Summary#

The core value of Next.js in one sentence: It upgrades React from a “frontend library” to a “full-stack framework.”

Traditional React (CSR)	Next.js
Renders in the browser	Server-side rendering + client-side interaction
Requires a separately built backend	Built-in API Routes / Server Actions
Manual route configuration	File system as routing
Poor SEO	Native SEO-friendly
Single rendering mode	SSG / SSR / ISR chosen on demand

After learning the fundamentals of HTML/CSS/JavaScript, understanding React’s component-based thinking, and grasping the differences between the three rendering modes, Next.js is the “ultimate weapon” that integrates all this knowledge together. From idea to launch, one repository is all you need.