Server-side session access in NextJS - Mini Project: Build & Apply

Server-side Session Access in Next.js

📖 Scenario: You are building a simple Next.js app that needs to read user session data on the server side to personalize the page.This is common when you want to show user-specific content securely before the page loads.

🎯 Goal: Build a Next.js server component that accesses a user session on the server side and displays the user's name if logged in.

📋 What You'll Learn

Create a mock session object with user data

Add a configuration variable for session key

Write a server component that reads the session data

Render the user's name or a guest message based on session

💡 Why This Matters

🌍 Real World

Server-side session access is essential for personalizing pages securely before they reach the browser, improving user experience and security.

💼 Career

Understanding server-side session handling is key for roles in full-stack development, backend integration, and building secure web applications with Next.js.

1

Create a mock session object

Create a constant called mockSession that is an object with a user property. The user property should be an object with name set to "Alice".

NextJS

# Create a constant mockSession with user name Alice
# Your code here

Need a hint?

Use const mockSession = { user: { name: "Alice" } }; to create the session object.

2

Add a session key configuration

Create a constant called SESSION_KEY and set it to the string "userSession".

NextJS

const mockSession = { user: { name: "Alice" } };
// Create a constant SESSION_KEY with value "userSession"
// Your code here

Need a hint?

Use const SESSION_KEY = "userSession"; to define the session key.

3

Create a server component to read session

Create an async function component called UserGreeting that reads the mockSession object. Inside, create a variable userName that gets the name from mockSession.user.name. Return a JSX <div> that says Hello, {userName}!.

NextJS

const mockSession = { user: { name: "Alice" } };
const SESSION_KEY = "userSession";

// Create async function component UserGreeting
// Your code here

Need a hint?

Define UserGreeting as an async function that returns JSX with the user's name.

4

Add fallback for guest users

Update the UserGreeting component to check if userName exists. If it does, return <div>Hello, {userName}!</div>. Otherwise, return <div>Hello, Guest!</div>.

NextJS

const mockSession = { user: { name: "Alice" } };
const SESSION_KEY = "userSession";

export default async function UserGreeting() {
  const userName = mockSession.user.name;
  // Add conditional rendering for guest users
  // Your code here
}

Need a hint?

Use an if statement to check userName and return different JSX accordingly.