Nextjs 13 App Router support

[tolgaisik]

Next 13 AppRouter support.
Currently, wagmi is not working with appDir.

[Drewsapple]

It works fine, you just need to be explicit about it existing inside of the client scope.

Make a app/Providers.tsx with "use client"; and put any client side context providers (including wagmi) in there.

Then, in your app/layout.tsx, import Providers and wrap all of your pages in it:

export default Layout({children}) {
  return (<Providers>
    {children}
  </Providers>)
}

Now, every client component will have access to all of the context provided in your Providers component, but you can have arbitrarily many server components between the component providing the context and those consuming it.

[petermazzocco]

Hey @Drewsapple, I tried using this and it failed with many errors when using RainbowKit + Wagimi + Viem in the latest Next 13 App routing. Do you have an example you can point to that works? Would help a lot!

[tolgaisik]

it works but has many errors and needs webpack configuration.

[corlys]

Im sorry if i sound stupid, but what do you mean by this but you can have arbitrarily many server components between the component providing the context and those consuming it. Is there any specific order on how to wrap the providers in order to the server component to work?

[Drewsapple]

Don't wrap them, just make the config provider accept components as a prop. Server components will be pre-rendered where they're declared, and the output html will get passed in and rendered as a child.

[rushi3691]

is there any working solution of this? i am having the same issue with app router

[jxom]

https://github.com/wagmi-dev/create-wagmi/tree/main/templates/next/default

[anhtuanleee]

hello @jxom, can i create different folder Provider and use in layout.tsx ?

[Michael679089]

@jxom Broken link.

[tmm]

@Michael679089 updated link
https://github.com/wevm/wagmi/tree/main/packages/create-wagmi/templates/next