Development server and hot reload in NextJS - Mini Project: Build & Apply

Development Server and Hot Reload in Next.js

📖 Scenario: You are building a simple Next.js app to display a welcome message. You want to set up the development server so you can see your changes instantly without restarting the server manually.

🎯 Goal: Create a Next.js app with a basic page component. Configure the development server and demonstrate hot reload by updating the page content.

📋 What You'll Learn

Create a Next.js page component named page.tsx inside the app directory.

Add a title variable with the value 'Welcome to Next.js!'.

Render the title inside an <h1> tag.

Start the Next.js development server using the next dev command.

Modify the title variable to 'Hot Reload Works!' and observe the page update automatically.

💡 Why This Matters

🌍 Real World

Developers use Next.js development server and hot reload to build web apps faster by seeing changes immediately without restarting the server.

💼 Career

Understanding how to run and use the Next.js dev server with hot reload is essential for frontend developers working with React and Next.js frameworks.

1

Create the initial Next.js page component

Create a file named page.tsx inside the app directory. Inside it, create a constant variable called title and set it to 'Welcome to Next.js!'. Then export a default functional component that returns an <h1> element displaying the title.

NextJS

// Your code here

Need a hint?

Remember to create a constant title and use it inside the returned JSX.

2

Add a script to start the development server

In your package.json file, add a dev script with the command next dev to start the Next.js development server.

NextJS

const title = 'Welcome to Next.js!';

export default function Page() {
  return {title};
}

// Add the dev script in package.json
// "dev": "next dev"

Need a hint?

Open package.json and add the dev script inside the scripts section.

3

Run the development server and observe hot reload

Run the command npm run dev in your terminal to start the Next.js development server. Then, in the page.tsx file, change the title variable value to 'Hot Reload Works!'. Save the file and observe the page update automatically in the browser without restarting the server.

NextJS

const title = 'Welcome to Next.js!';

export default function Page() {
  return {title};
}

// Change the title to 'Hot Reload Works!' and save
// Your code here

Need a hint?

Change the title string and save the file to see the page update automatically.

4

Add a meta viewport tag for responsive design

In the app directory, create a head.tsx file. Export a default function that returns a <meta> tag with name="viewport" and content="width=device-width, initial-scale=1" to ensure the page is responsive on all devices.

NextJS

// Your code here

Need a hint?

This tag helps your app look good on phones and tablets by controlling the page width.