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

Client-side Session Access in Next.js

📖 Scenario: You are building a simple Next.js app that shows a welcome message to a user based on their session data stored on the client side.This is common in real websites where you want to greet logged-in users without reloading the page.

🎯 Goal: Build a Next.js page that reads a user name from client-side session storage and displays a personalized greeting.

📋 What You'll Learn

Create a React functional component in Next.js

Use the useEffect hook to access session storage on the client side

Store and read a user name string in session storage

Display the user name in a greeting message inside the component

Ensure the component only accesses session storage on the client side

💡 Why This Matters

🌍 Real World

Many web apps store user info in session or local storage to personalize pages without extra server calls.

💼 Career

Understanding client-side session access is key for frontend developers working with React and Next.js to build responsive user experiences.

1

Set up the Next.js page component

Create a React functional component called WelcomePage that returns a <div> with the text Loading... inside it.

NextJS

# Your code here

function WelcomePage() {
  return Loading...;
}

export default WelcomePage;

Need a hint?

Start by writing a simple React function component that returns a div with 'Loading...'.

2

Add state to hold the user name

Inside the WelcomePage component, import useState from React and create a state variable called userName initialized to an empty string ''.

NextJS

import { useState } from 'react';

function WelcomePage() {
  // Create userName state here
  
  return Loading...;
}

export default WelcomePage;

Need a hint?

Use useState('') to create a state variable userName and its setter setUserName.

3

Read user name from session storage on client side

Import useEffect from React. Inside WelcomePage, use useEffect with an empty dependency array to run code once on the client side. Inside it, read the userName from sessionStorage using sessionStorage.getItem('userName'). If a value exists, update the userName state using setUserName.

NextJS

import { useState, useEffect } from 'react';

function WelcomePage() {
  const [userName, setUserName] = useState('');

  // Use useEffect to read userName from sessionStorage

  return Loading...;
}

export default WelcomePage;

Need a hint?

Use useEffect to run code after the component mounts. Access sessionStorage only inside useEffect.

4

Display the greeting with the user name

Update the returned JSX inside WelcomePage to show <div>Hello, {userName}!</div> if userName is not empty. Otherwise, show <div>Loading...</div>.

NextJS

import { useState, useEffect } from 'react';

function WelcomePage() {
  const [userName, setUserName] = useState('');

  useEffect(() => {
    const storedName = sessionStorage.getItem('userName');
    if (storedName) {
      setUserName(storedName);
    }
  }, []);

  // Show greeting if userName exists, else show Loading...

  return Loading...;
}

export default WelcomePage;

Need a hint?

Use a conditional expression inside JSX to show the greeting only when userName is set.