Learn › Next.js › Hello, Next.js! --- Your First App

Hello, Next.js! --- Your First App

⏱ 10 min read read

What is Next.js?

Next.js is a React framework built by Vercel. It adds server-side
rendering (SSR), static site generation (SSG), file-based routing, API
routes, image optimisation, and much more on top of React --- all with
zero config.

React handles the UI. Next.js handles routing, rendering, and the
server.

Next.js 13+ introduced the App Router --- the modern, recommended
approach.

Files in app/ automatically become routes. No react-router needed.

Run locally with: npx create-next-app@latest my-app

Project Structure (App Router):

my-app/

├── app/

│ ├── layout.tsx ← Root layout (wraps every page)

│ ├── page.tsx ← Home route /

│ ├── about/

│ │ └── page.tsx ← About route /about

│ └── globals.css

├── public/ ← Static files (images, fonts)

├── next.config.js

└── package.json

Server Components vs Client Components:

By default ALL components in the App Router are Server Components ---
they render on the server and send HTML. No JavaScript bundle shipped
for them.

Add 'use client' at the top of a file to make it a Client Component
--- it can use useState, useEffect, event handlers, and browser APIs.

IMPORTANT: Server Components CANNOT use useState, useEffect, or
browser APIs.

Client Components CAN, but they add JavaScript to the browser bundle.

Rule of thumb: keep as much as possible as Server Components.

Only add 'use client' when you need interactivity or browser APIs.

Running the Dev Server:

npx create-next-app@latest my-app # create project

cd my-app

npm run dev # start dev server at localhost:3000

npm run build # production build

npm start # run production build

Code Example

// app/page.tsx ← this file is the / route

// No 'use client' = Server Component by default

export default function HomePage() {

return (

<main>

<h1>Hello, Next.js!</h1>

<p>This is a Server Component --- rendered on the server.</p>

</main>

);

}

// app/layout.tsx ← wraps every page

export const metadata = {

title: 'My Next.js App',

description: 'Learning Next.js',

};

export default function RootLayout({

children,

}: {

children: React.ReactNode;

}) {

return (

<html lang="en">

<body>{children}</body>

</html>

);

}

// app/about/page.tsx ← /about route

export default function AboutPage() {

return <h1>About Us</h1>;

}

// Client Component with interactivity

// app/counter/page.tsx

'use client';

import { useState } from 'react';

export default function Counter() {

const [count, setCount] = useState(0);

return (

<div>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>+1</button>

</div>

);

}

← Back to Course File-Based Routing →