Next.js - lesson 1 | HackIndia Skills

Key point

One idea

Start with App Router from day one. In Next.js, routes come from files, and the app folder is where your project will grow.

For this track, your repo must clearly show App Router files. Do not start with an older Pages Router tutorial and try to convert it at 2 am.

What you create

You will create a Next.js app using create-next-app. The current default setup gives you TypeScript, Tailwind CSS, ESLint, App Router, Turbopack, the @/* import alias, and AGENTS.md.

You only need the starter today. Later lessons will add routes, Server and Client Components, server data fetching, and a route handler.

Your to-do

Before you start

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.

Check that your laptop has Node.js 20.9 or newer.
Use macOS, Windows with WSL, or Linux.
Choose a short project name, like campus-helpdesk or mess-feedback.
Open a terminal in the folder where you keep hackathon projects.

0 of 4 done

Example

Create and run

Use pnpm if you have it. This command creates the app with the default recommended choices, including App Router.

The dev server runs locally. Open the local URL it prints in your browser.

pnpm create next-app@latest campus-helpdesk --yes
cd campus-helpdesk
pnpm dev

Files to notice

Open the project in your editor. The two files to notice today are app/layout.tsx and app/page.tsx.

The root layout is required. It wraps your app. The page file creates the home route, which is /.

Example

Tiny home edit

Make one small edit so your first commit is yours. Keep it simple.

Replace the starter home content with a title for your hackathon idea. You will improve it later.

// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-8">
      <h1 className="text-3xl font-bold">Campus Helpdesk</h1>
      <p className="mt-4">A Next.js App Router project for faster campus issue tracking.</p>
    </main>
  );
}

Common mistake

Avoid old tutorials

If a tutorial starts with a pages folder as the main router, it is using the older Pages Router path. Pages Router is still supported, but this track uses App Router.

Also, older tutorials may talk like Webpack is the default. In the current starter, Turbopack is the default bundler. You do not need to change it today.