One rule
In App Router, your URL comes from your files. A folder becomes a route only when it has a page.tsx file inside it.
app/page.tsx is the home route /. app/team/page.tsx becomes /team. app/projects/new/page.tsx becomes /projects/new.
What counts as a route
Next.js uses file-system routing. You do not write a route table for normal pages.
This is useful in hackathons. A judge or recruiter can open your repo and see your app structure quickly.
Starter route map
For a campus hackathon project, keep the first route map small. Add only the pages you can finish and test on a phone.
Here is a simple structure for a student project showcase app.
app/
layout.tsx
page.tsx
about/
page.tsx
projects/
page.tsx
new/
page.tsx
contact/
page.tsxLayouts wrap pages
The root app/layout.tsx is required. It must contain html and body, and it receives children.
A layout inside a folder wraps all pages below that folder. Use this for shared nav, sidebars, tabs, or a project dashboard shell.
Root layout example
This layout adds a simple header to every page. The children value is where the current route renders.
// app/layout.tsx
import type { ReactNode } from 'react';
import './globals.css';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<header>
<a href="/">Home</a> | <a href="/projects">Projects</a> | <a href="/about">About</a>
</header>
<main>{children}</main>
</body>
</html>
);
}Add one route
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Page example
A page can be plain for now. Later lessons will add Server Components, Client Components, data fetching, and route handlers.
// app/about/page.tsx
export default function AboutPage() {
return (
<section>
<h1>About this project</h1>
<p>Built for a hackathon by a student team in India.</p>
</section>
);
}Common mistake
Do not create only a folder and expect a URL to work. The route is accessible only when that segment has a page.tsx file.
Also avoid copying older tutorials that put most routes in pages/. App Router uses the app folder for this track.
Plan before coding
Ask AI for a route map, not for the full app. Give it your idea, user types, and demo flow. Then check that every important demo screen has a clear URL.
For a 24-hour build, choose 4 to 6 routes. More routes means more testing before submission.
Prompt:
I am building a Next.js App Router hackathon app for [idea].
Users are [students/admins/judges].
Suggest a small app/ folder route map with 4 to 6 routes.
Use page.tsx and layout.tsx only.
Do not include API routes yet.Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done