NextJSframework~30 mins

Create Next App setup in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Create Next App setup

📖 Scenario: You want to start a new website project using Next.js, a popular React framework. To do this, you need to set up the basic files and folders that Next.js requires to run your app.

🎯 Goal: Build the initial Next.js app structure with the main app folder and a simple homepage component.

📋 What You'll Learn

Create the app folder inside the project root

Create a page.tsx file inside the app folder

Write a functional React component named Page that returns a heading with the text 'Welcome to Next.js!'

Export the Page component as the default export

💡 Why This Matters

🌍 Real World

Starting a Next.js project requires setting up the app folder and main files to organize pages and layouts.

💼 Career

Knowing how to set up a Next.js app is essential for frontend developers working with React and modern web frameworks.

Progress0 / 4 steps

Create the app folder

Create a folder named app in the root of your Next.js project. This folder will hold your application pages and components.

NextJS

# Create a folder named 'app' in your project root
# Your code here

Need a hint?

In your project directory, create a new folder called app.

Create the page.tsx file

Inside the app folder, create a file named page.tsx. This file will be the main homepage of your Next.js app.

NextJS

// Inside the 'app' folder, create 'page.tsx'
// Your code here

Need a hint?

Write a React functional component named Page that returns an <h1> heading with the text 'Welcome to Next.js!'. Export it as default.

Add metadata configuration

In the app folder, create a file named metadata.ts. Inside it, export a constant named metadata with a title property set to 'Next.js App'.

NextJS

import React from 'react';

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

// Create 'metadata.ts' in 'app' folder and export 'metadata' with title
// Your code here

Need a hint?

Create a file metadata.ts exporting a constant metadata with a title property set to 'Next.js App'.

Add the root layout file

Inside the app folder, create a file named layout.tsx. Write a React functional component named RootLayout that accepts children as a prop and returns an html element with a body containing the children. Export RootLayout as the default export.

NextJS

export const metadata = {
  title: 'Next.js App'
};

import React from 'react';

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

// Create 'layout.tsx' with RootLayout component wrapping children
// Your code here

Need a hint?

Create a RootLayout component that wraps its children inside <html> and <body> tags. Export it as default.