NextJSframework~30 mins

Project structure overview in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Next.js Project Structure Overview

📖 Scenario: You are starting a new Next.js project to build a simple website. Understanding the project structure helps you organize your files and code properly.

🎯 Goal: Learn the basic Next.js project structure by creating the main folders and files needed for a simple app.

📋 What You'll Learn

Create the app folder as the main directory for pages

Add a page.tsx file inside app with a simple component

Create a layout.tsx file inside app to define the page layout

Add a globals.css file inside app for global styles

💡 Why This Matters

🌍 Real World

Next.js projects use this structure to organize pages, layouts, and styles for scalable web apps.

💼 Career

Understanding Next.js project structure is essential for frontend developers working with React and modern web frameworks.

Progress0 / 4 steps

Create the app folder and page.tsx file

Create a folder named app and inside it create a file named page.tsx. In page.tsx, write a React functional component called Page that returns an <h1> with the text Welcome to Next.js.

NextJS

// Create the app folder and inside it create page.tsx
// Write a React functional component named Page that returns Welcome to Next.js

Need a hint?

Use export default function Page() and return an <h1> element with the exact text.

Add a layout.tsx file inside app

Inside the app folder, create a file named layout.tsx. Write a React functional component called RootLayout that accepts a children prop of type React.ReactNode and returns an <html> element containing a <body> that renders the children.

NextJS

export default function Page() {
  return Welcome to Next.js;
}

// Create layout.tsx with RootLayout component that wraps children in  and

Need a hint?

Define RootLayout with a children prop and wrap it inside <html lang="en"> and <body>.

Create a globals.css file for global styles

Inside the app folder, create a file named globals.css. Add a CSS rule that sets the body background color to #f0f0f0 and the font family to Arial, sans-serif.

NextJS

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

/* Create globals.css with body background and font styles */

Need a hint?

Write CSS inside globals.css to style the body background and font.

Import globals.css in layout.tsx

At the top of the layout.tsx file inside app, add an import statement to import ./globals.css so the global styles apply to the app.

NextJS

// Import globals.css at the top of layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

/* globals.css */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

Need a hint?

Use import './globals.css'; at the top of layout.tsx.