Folder Structure

The general project structure looks as follows:

pages/
    api/
        login/
            route.ts
            middleware.ts
    page.tsx
    layout.tsx
    index.css
    middleware.ts
public/
    favicon.ico
    out.css

Pages Directory

The pages directory contains every accessible route in your project.

page.ts(x)

A page.ts(x) anywhere within the pages folder denotes a page route. Eg. pages/page.tsx will be available at localhost:3000/.

You can nest as deep as you'd like: pages/dashboard/admin/page.tsx -> localhost:3000/dashboard/admin.

You can read more about pages here

api/**/route.ts

Route files register API routes to your project. Read more about them here

layout.ts(x)

A layout.ts(x) anywhere within the pages folder denotes a layout. Layout's cascade, meaning a layout at pages/ will be shown on pages/blog, pages/blog/recipes, etc.

You can read more about layouts here

Public directory

Anything within the public/ directory of your project will be symlinked in dev mode, and in prod mode recursively copied into the dist directory of the project's output folder.

That being said, obviously do not put sensitive information within public, as all files within it can just be requested and downloaded. It's also a good idea to implement middleware to guard your public directory.