NextJSframework~30 mins

What is Next.js - Hands-On Activity

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

What is Next.js

📖 Scenario: You want to create a simple web page using Next.js to understand how it works.

🎯 Goal: Build a basic Next.js page that shows a welcome message.

📋 What You'll Learn

Create a new Next.js page component

Use a functional component with a simple return statement

Export the component as default

Use semantic HTML inside the component

💡 Why This Matters

🌍 Real World

Next.js is used to build fast, user-friendly websites and web apps with React. It helps with server-side rendering and routing.

💼 Career

Knowing Next.js is valuable for frontend developers working with React to create scalable and optimized web applications.

Progress0 / 4 steps

Create a Next.js page component

Create a new file called index.js and write a functional component named HomePage that returns a <main> element.

NextJS

# Create a functional component named HomePage
# Your code here

Need a hint?

Use export default function HomePage() { return (

) } as the basic structure.

Add a welcome message inside the main element

Inside the <main> element, add a <h1> tag with the text Welcome to Next.js!.

NextJS

export default function HomePage() {
  return (
    
      {/* Add a heading here */}
    
  )
}

Need a hint?

Use <h1>Welcome to Next.js!</h1> inside the <main> tags.

Add a paragraph explaining Next.js

Below the <h1> tag, add a <p> tag with the text Next.js is a React framework for building fast websites..

NextJS

export default function HomePage() {
  return (
    
      Welcome to Next.js!
      {/* Add a paragraph here */}
    
  )
}

Need a hint?

Use <p>Next.js is a React framework for building fast websites.</p> below the heading.

Add a page title using the Head component

Import the Head component from next/head at the top. Inside the component, add <Head><title>Next.js Intro</title></Head> above the <main> element.

NextJS

import Head from 'next/head'

export default function HomePage() {
  return (
    
      {/* Add Head component here */}
      
        Welcome to Next.js!
        Next.js is a React framework for building fast websites.
      
    
  )
}

Need a hint?

Use import Head from 'next/head' and add <Head><title>Next.js Intro</title></Head> before <main>.