Setup and Project Structure

Level: Beginner to Intermediate

ℹ️ What You'll Learn

• Creating a Next.js project with create-next-app
• App directory structure and conventions
• Config files: next.config.js, tsconfig.json, package.json
• public folder for static assets
• Environment variables setup
• npm scripts: dev, build, start
• TypeScript in Next.js projects
• SMS project folder organization

Why This Matters

Setup and Project Structure is part of building production React applications with Next.js. You will use it when creating student dashboards, SEO-friendly pages, API-connected forms, route handlers, layouts, and deployments for .NET-backed systems.

Next.js projects are usually created with create-next-app.

The Problem

Beginners often treat Next.js like plain React and miss routing, rendering, server/client boundaries, environment variables, and deployment behavior. This lesson shows how Setup and Project Structure works in a real School Management System frontend that talks to ASP.NET Core APIs.

Prerequisites

Install Node.js LTS. Then check:

node --version
npm --version

Create a Project

npx create-next-app@latest school-ui

For beginner learning, choose:

TypeScript? No or Yes
ESLint? Yes
Tailwind CSS? Optional
src directory? Optional
App Router? Yes
Turbopack? Yes
Import alias? Yes

If you are learning React with JavaScript first, choose JavaScript. For production teams, TypeScript is usually better.

Run the App

cd school-ui
npm run dev

Open:

http://localhost:3000

Important Files

school-ui/
  app/
    layout.jsx
    page.jsx
    globals.css
  public/
  package.json
  next.config.js

File/folder	Purpose
app/page.jsx	Home page
app/layout.jsx	Shared root layout
app/globals.css	Global styles
public/	Static files like images
package.json	Scripts and dependencies
next.config.js	Next.js configuration

package.json Scripts

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Use:

• npm run dev during development
• npm run build before deployment
• npm run start to run the production build locally

⚠️ Build before deploy

Always run npm run build before publishing. Development mode can hide performance and routing issues.

First Page

app/page.jsx

export default function HomePage() {
  return (
    <main>
      <h1>School Management System</h1>
      <p>Welcome to the Next.js frontend.</p>
    </main>
  );
}

Interview Questions

🎯 What is the app folder in Next.js?

The app folder contains routes, layouts, pages, loading UI, error UI, and route handlers for the App Router.

🎯 What is the difference between npm run dev and npm run build?

npm run dev starts a development server. npm run build creates an optimized production build and catches many deployment issues.

Quick Definitions

• Setup and Project Structure - The main Next.js concept explained in this lesson.
• App Router - The modern Next.js routing system based on the app folder.
• Server/Client boundary - The decision of whether code runs on the server or in the browser.
• ASP.NET Core integration - Calling or proxying backend APIs from a Next.js frontend.

Common Mistakes

• Treating every component as a Client Component without a reason
• Forgetting environment variables differ between local and production
• Calling ASP.NET Core APIs from the browser without handling CORS
• Putting secrets in NEXT_PUBLIC_ variables
• Skipping npm run build before deployment

Practice Task

Create a small Next.js example using Setup and Project Structure. Keep it connected to a School Management System scenario.

Suggested practice:

1. Create or update a route, layout, form, or data-fetching example.
2. Use realistic student, teacher, attendance, or marks data.
3. Connect the example to an ASP.NET Core-style API URL or route handler.
4. Add one loading, empty, or error state where relevant.
5. Explain what runs on the server and what runs in the browser.

Quick Revision

Question	Answer
What is the main idea?	Use Setup and Project Structure correctly in a Next.js App Router project.
Where is it used?	Pages, layouts, route handlers, forms, APIs, authentication, and deployment.
What should beginners watch carefully?	Server/client boundaries, environment variables, CORS, and production builds.
What is the best debugging habit?	Check terminal build output, browser console, network tab, and server logs.

🤖Use AI to Learn Faster

⚠️ Important for beginners: Do NOT use AI to write your code yet. Type every example yourself. Your brain learns by doing, not by reading AI output. Use AI only to explain and quiz you — not to code for you. Once you have strong fundamentals, AI becomes a powerful productivity tool for repetitive tasks.

Use ChatGPT, Claude, or Copilot to go deeper on Setup and Project Structure. Try these prompts:

• "Explain Setup and Project Structure with a Next.js and ASP.NET Core example"
• "Give me 5 practice tasks for Setup and Project Structure in a School Management app"
• "Show common Next.js mistakes in Setup and Project Structure and how to fix them"
• "Quiz me on Setup and Project Structure with interview-style questions"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Next Article

Routing and Navigation ->