Server-side state passing in NextJS - Mini Project: Build & Apply

Server-side State Passing in Next.js

📖 Scenario: You are building a simple Next.js app that shows a welcome message with a user's name fetched on the server side.This simulates a real website greeting a logged-in user by their name.

🎯 Goal: Build a Next.js page that fetches a user's name on the server side and passes it as state to the React component to display a personalized greeting.

📋 What You'll Learn

Create a server-side function to fetch user data

Pass the fetched user name as props to the page component

Render the user name inside the component

Use Next.js App Router conventions with a server component

💡 Why This Matters

🌍 Real World

Many websites greet users by name after logging in. This project shows how to fetch user info on the server and pass it to the client for personalized UI.

💼 Career

Understanding server-side state passing in Next.js is essential for building fast, SEO-friendly React apps with personalized content.

1

Create a server-side user data object

Create a constant called user with an object containing name set to 'Alice' inside the page.tsx file.

NextJS

// Create a constant user with name 'Alice'
// Your code here

Need a hint?

Use const user = { name: 'Alice' } to create the user object.

2

Create a server component that returns user name as props

Create an async function called getUser that returns the user object. Then create an async Page component that calls getUser and passes the result as a prop called user to a component called Greeting.

NextJS

const user = { name: 'Alice' }

// Create async function getUser returning user
// Create async Page component calling getUser and passing user prop to Greeting
// Your code here

Need a hint?

Define getUser to return the user object. Then in Page, await getUser() and pass the user to Greeting.

3

Create the Greeting component to display the greeting

Create a component called Greeting that accepts a user prop and renders a <h1> with the text Hello, {user.name}!.

NextJS

const user = { name: 'Alice' }

async function getUser() {
  return user
}

export default async function Page() {
  const user = await getUser()
  return 
}

// Create Greeting component accepting user prop and rendering Hello, {user.name}!
// Your code here

Need a hint?

Accept user as a prop in Greeting and render Hello, {user.name}! in an <h1>.

4

Export the page component as default

Ensure the Page component is exported as the default export from the file using export default Page.

NextJS

function Greeting({ user }) {
  return Hello, {user.name}!
}

const user = { name: 'Alice' }

async function getUser() {
  return user
}

// Export Page as default
// Your code here

Need a hint?

Make sure the Page component is exported as default with export default async function Page().