The App Folder

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

Open the file list. A Next.js project has a shape, and it carries meaning:

app/
    layout.jsx     the shell around every page
    page.jsx       the page at /
    globals.css    styles for the whole app

Two filenames are special, and you'll use them constantly:

page.jsx: makes a folder into a visitable URL. app/page.jsx is the home page, /.
layout.jsx: wraps the pages beneath it. The root layout holds <html> and <body>, so every page shares it.

The names are not a convention you could rename. Next.js looks for these exact filenames. That's how a folder of files becomes an app with URLs.

The root layout is locked in these lessons, so a broken shell can never take your app down. You'll work in app/page.jsx and the files you add yourself.

Try it yourself

This lesson doesn't include a code challenge.