What Is Next.js?

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Tell apart what React is responsible for and what Next.js is responsible for
Understand the benefits of server rendering
Get comfortable with the App Router instead of finding it intimidating

With React, you can build UI pieces like buttons, cards, and forms. But for a whole website, you still have to figure out things yourself — how to split up URL routes, how to fetch data on the server, how to render pages so search engines can read them. Next.js is a layer built on top of React that handles those decisions in a structured way.

The key idea

In the App Router, the folders under the app folder become URL segments, page.tsx becomes the page itself, and layout.tsx becomes the shared UI. Pages and Layouts are Server Components by default, so they can fetch straight from a database or an API on the server side. Only the parts that need interactivity — clicks, state, browser APIs — get split out as Client Components. This split cuts down on the JavaScript sent to the browser.

Let's try it together

tsx

export default function HomePage() {
  return (
    <main>
      <h1>Myanmar Notes</h1>
      <p>မှတ်စုတွေကို လွယ်လွယ်ကူကူ သိမ်းထားမယ်။</p>
    </main>
  );
}

How the code works

The component below doesn't use any hooks, so it stays a Server Component. The JSX is regular React syntax, but Next.js takes care of where the route lives, server rendering, and build optimization.

You should see

The home route shows the Myanmar Notes heading and an introductory message.

5-Minute Try-It

Write three examples each for what React is responsible for and what Next.js is responsible for.

Next.js — Getting Started — Next.js

Easy traps

Thinking Next.js is some brand-new language that replaces React
Assuming everything only works if every component is turned into a Client Component

Exercise

Write three examples each for what React is responsible for and what Next.js is responsible for.

You'll know it worked when: The home route shows the Myanmar Notes heading and an introductory message.