Can I pass data from one page to another as a State using Nextjs 13 App directory

Question

Using Nextjs 13 App Router, I want to pass previewData from MainComponent.jsx to Preview.jsx as a State. not through query or props. I Just want to pass data as a state from MainComponent.jsx and navigate to the Result.jsx receive the state data and display it in the Result Component. Is this possible, or is there a better approach to solve this problem?

My Folder Structure

-App
   -maincomponent
     -page.jsx
   -result
     -page.jsx

MainComponent.jsx

"use client";

import { useRouter } from "next/navigation";

const MainComponent = () => {
  const router = useRouter();
  const { id } = router.query;

  const imageData = images.find((image) => image.id === parseInt(id));

  let previewData = null;
  if (imageData) {
    previewData = {
      id: imageData.id,
      title: imageData.title,
      imageUrl: imageData.imageUrl,
    };
  }

  return (
    <div>
      {previewData ? (
        <div>
          <h1>{previewData.title}</h1>
        </div>
      ) : (
        <div>
          <p>Loading...</p>
        </div>
      )}
    </div>
  );
};

export default MainComponent;

Result.jsx

import { useRouter } from "next/navigation";

const Result = () => {

  return (
    <div>
        Display the Preview Data Here as A state
    </div>
  );
};

export default Result;

Can you elaborate more please? Show your folder structure and where those components are. Meanwhile, the short answer is no. You could, however, use a [context](https://nextjs.org/docs/getting-started/react-essentials#context) if you like. — Youssouf Oumar, Jul 23 '23 at 06:32
I have added the folder structure. Please let me if there are any query. — Auvee, Jul 23 '23 at 06:43
Using useContext, I'm losing my data every time I reload the browser. How can I prevent this? — Auvee, Jul 23 '23 at 07:43
you'd need to populate the context with the data on reload @Auvee — riazosama, Jul 23 '23 at 08:45

score 0 · Answer 1 · answered Jul 23 '23 at 09:09

okay what you need to do is use useContext hook and create an external state for your application. what I am trying to say is that create a new file in app directory and create a context and pass values to it and then wrap layout component with it like this: suppose your new file name is store.jsx

const yourContext = createContext();
const Store = ({children}) =>{
 <yourContext.Provider values={{yourvalues}}>
    {children}
 </yourContext.Provider>
}
export default Store;

Then in layout.jsx file

import Store from "./store";
export default function RootLayout({children}){
return <Store> {children} </Store> }

what this will do is that I will create a common state across your application and then where ever you want to call it you just need to use useContext hook in that page and your state can easily be accessible without being lost. give it a try

you will lose your context value always after a manual reload unless you re-assign your state with same values which can maybe done with cookies . but if you are using your navigation buttons and page get reloaded please check that you might be using tags for your navigation. Next Js suggests you to use tags if you want to navigate between pages. if that is your issue try replacing with . — Faizan Tariq, Jul 23 '23 at 17:40

Can I pass data from one page to another as a State using Nextjs 13 App directory

1 Answers1