[Question] Usage example with NextJS?

[matepapp]

Hey! 👋

Thanks for the project! Unfortunately, I couldn't find any examples with NextJS. Is it possible to use, or integrate it into a NextJS project?

[jhuleatt]

Hi @matepapp, I don't know of any NextJS + ReactFire samples yet. It looks like Suspense with SSR is available in Concurrent Mode now, so I think it should be possible to use all of ReactFire's features with Next. If you know of any docs that show how to work with NextJS + Suspense/Concurrent Mode, please send them our way!

Even if you can't use Suspense/Concurrent Mode, <FirebaseAppProvider> uses the normal React Context APIs, and every ReactFire hook has an escape hatch to let you avoid using Suspense, so depending on your use case, ReactFire may still be helpful even without Concurrent Mode.

Once we get a better idea of what the Suspense/Concurrent Mode server rendering story looks like, we'll make sure ReactFire supports it and it is documented.

[matepapp]

Thanks, @jhuleatt! 🙌

Actually, first I tried with <FirebaseAppProvider> + initial values in the hooks, but NextJS threw a cryptic error message. That's when I thought there's might be an example repository somewhere. Although, I didn't know that SSR is available in experimental Concurrent Mode and it looks NextJS even supports it! Right now, I'm good with the "regular" firebase library, but I'm considering to try out Concurrent Mode in the long run.

[ghost]

@matepapp could you show me that cryptic error. I am trying it with nextjs too. It worked until today and now it is giving me an invariant violation.

Also:
vercel/next.js#11405

[catrawalkar]

Hi, I tried with NextJs and somehow I am getting error. Can you please help?

#328

[matepapp]

To be honest, I just put the <FirebaseAppProvider> into the top-level _app.tsx, and sometimes I got something like React Suspense is not supported in SSR. How did you solve this @searchableguy? Did you create a withFirebase higher-order component with <FirebaseAppProvider> nested in and wrap your pages with it?

[raghav0622]

Hi @matepapp, I don't know of any NextJS + ReactFire samples yet. It looks like Suspense with SSR is available in Concurrent Mode now, so I think it should be possible to use all of ReactFire's features with Next. If you know of any docs that show how to work with NextJS + Suspense/Concurrent Mode, please send them our way!

Even if you can't use Suspense/Concurrent Mode, <FirebaseAppProvider> uses the normal React Context APIs, and every ReactFire hook has an escape hatch to let you avoid using Suspense, so depending on your use case, ReactFire may still be helpful even without Concurrent Mode.

Once we get a better idea of what the Suspense/Concurrent Mode server rendering story looks like, we'll make sure ReactFire supports it and it is documented.

It is Possible to use React concurrent mode in next.js with all the experimental stuff. Here's the Snippet:

install react@experimental react-dom@experimental as deps and then in config:

in next.config.js

module.exports = {
  reactStrictMode: true,

  experimental: {
    reactMode: 'concurrent', // or you can make it blocking 
  },
}
``` and make sure to wrap your application in NoSsr Component from 'react-no-ssr' or one with same api/purpose.

[shamoons]

Will try today. But can a page be wrapped in Suspense?

[catrawalkar]

Did you get your answer? can a page be wrapped in Suspense?