in next.js 14 how to pass data from one page to another without showing data on url?

Question

I am a React Native dev trying to build a web app my quastion is in next.js 14 how to pass data from one page to another without showing data on url? I have an app directory in my Next.js project.

by not showing data on URL i mean for example http://localhost:3000/mypage?name="Johndeo"

I have a Button component that I am using in my whole app for Button. it also has a href prop for navigating from one page to another.

i want to access pass name as data from page1 and log it to page2

This is how i am using Button component <Button href="/mypage2"> Go to page2 </Button>

Buttom component:

import React from 'react';
import Link from 'next/link'
import clsx from 'clsx'

interface ButtonProps {
  type?: "button" | "submit" | "reset";
  href?: string;
  className?: string;
  children: React.ReactNode;
}

export function Button({ href, className, children, ...props }: ButtonProps) {

  className = clsx(
    className,
    'inline-flex rounded-full px-4 py-1.5 text-sm font-semibold transition bg-white text-black hover:bg-neutral-200'
  )

  let inner = <span className="relative top-px">{children}</span>

  if (href) {
    return (
      <Link href={href} className={className} {...props}>
        {inner}
      </Link>
    )
  }

  return (
    <button className={className} {...props}>
      {inner}
    </button>
  )
}

Answer 1

When you want to use server side rendering in Next.js, you need to keep in mind that actions happening on the client side (clicking a button) are decoupled from the server and since HTTP is by definition a stateless protocol, you have to pass data either via cookies, headers or use query parameters such as /users?user=USERNAME. Alternatively, you can also use dynamic routes in Next.js to format it more nicely like /users/:id but the concept is essentially the same.

If you however can't pass data to the server you can fall back to client side rendering with 'use client' as the first line of the component file and conditionally fetch / render the data on the client using javascript.

Here is an example using client side rendering, where i assumed that the details were already available to the page. Otherwise you'd have to pass some identifier (e.g. username) to the UserDetails component and fetch the details from there.

page.jsx:

"use client";

import { useState } from "react";

// Let's assume this is the data you get from the API
const userInfo = [
  {
    name: "John Doe",
    caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    profileImg: "https://images.example.com/users/john-doe.jpg",
  },
  ... // more users go here
];

// User details modal
// I assumed you want to show the details as a popup modal when the user clicks on the button
// and close the modal when the user clicks outside the modal
export const UserDetails = ({ user, setUserDetails }) => {
  const closeModal = () => {
    setUserDetails(null);
  };

  return (
    <>
      <div className="backdrop" onClick={closeModal}>
        <div className="modal">
          <img src={user.profileImg} alt={user.name} />
          <h1>{user.name}</h1>
          <p>{user.caption}</p>
        </div>
      </div>
    </>
  );
};

// Main Page component
// It renders the list of users and renders the UserDetails component conditionally
// when the user clicks on the button and hides it when the userDetails state is null again
export default function Home() {
  const [userDetails, setUserDetails] = useState(null);

  const handleClick = (user) => {
    setUserDetails(user);
  };

  return (
    <>
      {/* Display the list of users */}
      {userInfo.map((user) => (
        <ul>
          <li>
            {user.name}
            <button onClick={() => handleClick(user)}>Show Details</button>
          </li>
        </ul>
      ))}
      {/* Conditionally display UserDetails when the state is set */}
      {userDetails && (
        <UserDetails
          user={userDetails} // pass the user details to the modal
          setUserDetails={setUserDetails} // pass the setUserDetails function to the modal
                                          // so we can reset the state from within the modal
        />
      )}
    </>
  );
}