ninetailed-inc / ninetailed-examples

marketing-contentful-next-demo.vercel.app
11 stars 11 forks source link

Next 13 App Router error #59

Open kellypacker opened 1 year ago

kellypacker commented 1 year ago

I'm updating a site to use the Next 13 App Router paradigm. I'm getting an error with <NinetailedProvider />. I've tried adding the provider in various places but can't get it to work:

`NextRouter` was not mounted

Does it support the App Router? And if so what is the suggested place to put it? Thank you!

cwkosman commented 1 year ago

Hey @kellypacker,

Our Next.js SDK is not currently compatible out-of-the-box with RSCs and the App Router paradigm introduced in Next 13.4's. There are implementation steps you can take to ensure that Ninetailed runs only on the client side to leverage the app router, though you will likely find that a Pages directory implementation remains easier for now.

A demonstration implementation can be found here: https://github.com/ninetailed-inc/contentstack-next-app-router-example, where the following changes to a Pages directory Ninetailed implementation have been made:

  1. A component has been created manually to run on each route change. In a Pages directory implementation, these are automatically managed.
  2. The has been moved into it's own file to ensure it can use the 'use client' directive, following the advice of the Next.js migration guide on dealing with client-side providers.
  3. The component and components used as children (e.g., the components corresponding to rendered content types) also use their own files to leverage the 'use client' directive.

Hope that helps!