Your First Page

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

Time to edit a page. app/page.jsx is an ordinary React component, the same kind you wrote all through Fundamentals:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

Two small rules that never change:

The page must be the file's default export: that's how Next.js finds it
The component's name is up to you; only the filename and folder decide the URL

Notice what's missing: no route registration, no imports of a router, no ReactDOM.render. You write a component in the right file, and it is a page.

Challenge

Beginner

Make the home page say hello.

In app/page.jsx, inside the <main>, add an <h1> with id="title".
Its text must be exactly Welcome to Next.js.

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>
    );
}