Next.js - lesson 2 | HackIndia Skills

Next.js - lesson 2 | HackIndia Skills | HackIndia

Example

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

Example

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

Tip

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.

Map routes with files

One rule

What counts as a route

Starter route map

Layouts wrap pages

Root layout example

Add one route

Page example

Common mistake

Plan before coding

Do this now

Quick check