Next.js Basics

Next.js is a React framework with server-side rendering, file-based routing, and API routes.

Syntax

REACT

1
2
3
4
5
6
7
8
9

// app/page.tsx
export default function Home() {
    return <h1>Welcome to Next.js</h1>;
}

// app/about/page.tsx
export default function About() {
    return <h1>About Us</h1>;
}

Next.js Page Routing

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// app/page.tsx (Home page)
export default function Home() {
    return <h1>Welcome to Next.js</h1>;
}

// app/about/page.tsx
export default function About() {
    return <h1>About Us</h1>;
}

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
    return <h1>Post: {params.slug}</h1>;
}

Try It Yourself

Tutorial Complete

Back to React