Persist data between two pages with Next.js

Question

I would like to refactor my Next.js webapp to have different pages handle different screens. Currently, I have this component holding several states to know in which screen I'm in. In the jsx section, I'm using {value && ... } to render the right component.

But I feel this is not good design, and won't be maintainable when adding more and more screens.

I would also like to avoid Redux as it is overkill for my project.

I was thinking about persisting data in cookies so I can retrieve them with getInitialProps in every component when rendering a new page, but is there a more elegant way?

I've read about tweaking the _app.js but I'm not sure to understand the consequences of doing so, and how it could help me..

Any suggestion?

Are you using an express server or serverless functions with next.js. Do you have any webpages you want to protect? Is the data you want coming from a database that has anything to do with user authentication. — Uzair Ashraf, May 30 '20 at 07:53
@UzairAshraf backend in golang with graphql on top of mysql. yes I want to protect some pages (although the one I'm concerned with in my question are not). current data not related to the user auth. — Binajmen, May 30 '20 at 11:44
@AjayYadav Are you suggesting to use useContext() to manage the view selection, or to persist data from one page to another? — Binajmen, May 30 '20 at 11:45
@xadm In the context of Next.js, I'm not use how react-router could help me. But maybe you can elaborate so I fully understand your proposition? — Binajmen, May 30 '20 at 11:46
@Binajmen yes you can use useContext() to persist data on different levels. I find it useful for smaller applications instead of Redux — Ajay Yadav, Jun 01 '20 at 07:13

score 19 · Accepted Answer · answered May 30 '20 at 15:20

When multiple of your pages need to make use of same data, you can make use of Context to store the result. It a good way to make a centralized storage without using complex and more self sufficient libraries like redux

You can implement context inside of _app.js file which must reside inside your root folder. This way next.js treats it as a root wrapper and you would just need to use 1 instance of Context

contexts/appContext

import React from 'react';
const AppContext = React.createContext();
export const AppProvider = AppContext.Provider;
export const AppConsumer = AppContext.Consumer;
export default AppContext;

_app.js

import React from 'react'
import App from 'next/app'
import AppProvider from '../contexts/appContext';
class MyApp extends App {
  state={
    data:[]
  }
  render() {
    const { Component, pageProps } = this.props;
    // You can implement logic in this component to fetch data and update state
    return (
      <div>
        <AppProvider value={this.state.data}> // pass on value to context
          <Component {...pageProps} />
        </AppProvider>
      </div>
    )
  }
}
export default MyApp

Now further each component can make use of context value by using AppConsumer or using useContext if you use hooks

Please read more about how to use Context here

How can i use multi page form data with context api in nextjs? — Rehan, Feb 18 '21 at 20:01
When using `redux`, we require to use `redux-persist` etc to maintain the state across reloads wtih NextJs but how it works seamless with ContextAPI? — Srikanth Sharma, Oct 11 '21 at 02:52
I have campaign data in http query. I want to use that data throughout the application. I am using getServerSideProps to get the data in component. I used react context. but the context vanished while surfing to other pages of website. Is there server side session in next js? — Ankit Kataria, Oct 11 '21 at 05:58

Persist data between two pages with Next.js

1 Answers1