Why state management differs in Next.js - See It in Action

Why State Management Differs in Next.js

📖 Scenario: You are building a simple Next.js app that shows a counter. You want to understand how state works differently in Next.js compared to regular React apps.

🎯 Goal: Create a Next.js component that uses state to count button clicks. Learn how to set up state with useState and see how server and client parts behave differently.

📋 What You'll Learn

Create a functional component called Counter

Use useState to create a state variable count starting at 0

Add a button that increases count by 1 when clicked

Understand that state updates happen only on the client side in Next.js

Add a note explaining that server components do not hold state

💡 Why This Matters

🌍 Real World

Next.js apps often mix server and client code. Understanding where state lives helps build fast and interactive web apps.

💼 Career

Knowing state management in Next.js is key for frontend developers working with modern React frameworks and building scalable web applications.

1

Create the Counter component with initial state

Create a functional component called Counter in Next.js. Inside it, use useState to create a state variable named count with initial value 0.

NextJS

'use client';
import { useState } from 'react'

// Your code here

Need a hint?

Remember to import useState from 'react' and call it inside your component.

2

Add a button to increase the count

Inside the Counter component, add a <button> element. When clicked, it should call setCount(count + 1) to increase the count state by 1. Also display the current count inside the button.

NextJS

'use client';
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  // Your code here
}

Need a hint?

Use the onClick event on the button to update the state.

3

Explain client-side state updates in Next.js

Add a paragraph below the button inside the Counter component that says: "State updates happen only on the client side in Next.js."

NextJS

'use client';
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    
       setCount(count + 1)}>
        Count: {count}
      
      {/* Your code here */}
    
  )
}

Need a hint?

Use a paragraph tag to add the note below the button.

4

Add a note about server components and state

Add another paragraph below the first one inside the Counter component that says: "Server components in Next.js do not hold state."

NextJS

'use client';
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    
       setCount(count + 1)}>
        Count: {count}
      
      State updates happen only on the client side in Next.js.
      {/* Your code here */}
    
  )
}

Need a hint?

Add a second paragraph below the first to explain server components.