What Next.js Adds

Part of the Next.js Essentials section of Coddy's React journey — lesson 1 of 47.

You can already build components with React. So why does almost every real React app use a framework on top of it?

Because React, on its own, only does one job: turn your components into what's on screen. Everything else, you build yourself:

Pages and URLs: React has no idea what a URL is
Getting data: you fetch it in the browser, after the page has already loaded
Saving data: you write an API by hand

Next.js fills exactly those gaps. Its answers are refreshingly blunt:

A folder is a URL
Components run on the server by default, so they can load data before the page is ever sent
A function can save data, no API to write

That last point deserves a pause. In this course you'll fetch data with a plain await inside a component, with no loading spinner and no useEffect, because the component ran on the server before the user saw anything.

Everything you learned in Fundamentals still applies: these are the same components, the same props, the same JSX. Next.js is the building around them.

Challenge

Beginner

Here is your first Next.js page, already written for you.

What to do:

Look at where the file lives: app/page.jsx.
Press the Run button.
The preview shows that page at the URL /.

Nothing registered that route: the folder did. That is the idea the whole section builds on.

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}