Next.js - lesson 6 | HackIndia Skills

Key point

Production means real URL

Your project is not ready when it works on localhost. It is ready when a judge can open a public URL on a phone and use the main flow.

For this track, keep your App Router features working: layouts, Server Components, server fetches, and route handlers.

Build before deploy

A production build catches problems that dev mode may hide. Run it before every deployment, especially after adding a route handler or server-side data fetch.

Next.js production scripts should include dev, build, and start. The build step prepares the app. The start step runs the production server locally.

Example

Package scripts

Your package.json should have scripts like this. If you used create-next-app, you will likely already have them.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Your to-do

Local production check

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.

Run npm run build from the project root.
Fix TypeScript, import, environment variable, and routing errors shown in the terminal.
Run npm run start after the build succeeds.
Open the local production server in your browser and test the main flow.
Commit the fixes before deploying.

0 of 5 done

Pick the right host

Next.js can be deployed as a Node.js server, Docker container, static export, or through an adapter-supported host. Node.js server and Docker deployments support all Next.js features.

Be careful with static export. It has limited feature support. For this project, you have server-side data fetches and a route handler, so choose a host that can run Next.js server features.

Common mistake

Localhost is not proof

Do not submit only screenshots or a localhost URL. Judges cannot open your laptop from their phone.

Also do not test only on your own desktop. Mobile layout, slow college Wi-Fi, and missing environment variables often fail only after deployment.

Tip

Ask AI for checks

Use ChatGPT, Gemini, or Claude as a checklist helper, not as the final judge. Paste your package scripts, app folder tree, and deployment error.

Ask it to find likely production issues. Then verify every suggestion against your terminal output and your deployed app. Do not paste secret keys.

Prompt:
I am preparing a Next.js App Router hackathon project for production.
Here are my package scripts, app folder tree, and build error.
Tell me the likely issue and the smallest safe fix.
Do not suggest moving to Pages Router.
Do not suggest exposing unprefixed environment variables to the client.