Getting Started with Next.js

Next.js has become one of the most popular React frameworks for building modern web applications. Let's explore some of its core features.

The App Router

Next.js 14 introduces the App Router, which provides a file-system based routing approach:

// app/page.tsx
export default function Home() {
  return <h1>Welcome to my website!</h1>
}

Server Components

React Server Components allow you to render components on the server:

// app/users/page.tsx
async function getUsers() {
  const res = await fetch('https://api.example.com/users')
  return res.json()
}

export default async function UsersPage() {
  const users = await getUsers()

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )

}

Data Fetching

Fetch data directly in your components:

// Data fetching in Server Components
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
  return <main>{/* Use data */}</main>
}

Styling Options

Next.js supports various styling approaches:

With these fundamentals, you can build powerful, performance-optimized applications with Next.js.