Server Side Rendering (Next.js)

Guide on setting up Server Side Rendering (SSR) with Next.js using the QuirksNextProvider.

If you want to use Next.js to provide server-side rendering capabilities, you'll need to use an additional provider. This allows you to avoid any hydration errors.

Usage with App Router

Create a providers.tsx file:

/app/providers.tsx

"use client";
 
import {
  chain as osmosis,
  assets as osmosisAssetList,
} from 'chain-registry/mainnet/osmosis';
import { QuirksConfig, QuirksNextProvider } from "@quirks/react";
import { Config } from "@quirks/store";
import { keplrExtension, leapExtension } from "@quirks/wallets";
import { PropsWithChildren } from "react";
 
const config: Config = {
  wallets: [keplrExtension, leapExtension],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
};
 
export const Provider = ({ children }: PropsWithChildren<unknown>) => {
  return (
    <QuirksNextProvider>
      <QuirksConfig config={config}>{children}</QuirksConfig>
    </QuirksNextProvider>
  );
};

Import it inside your layout.tsx:

/app/layout.tsx

// @filename: layout.tsx
import { ReactNode } from "react";
import { Provider } from "./provider";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

You did it 🎉! Now you can start using it as described inside quick start.

Usage with Pages Router

Add the providers inside your _app.tsx:

/pages/_app.tsx

import {
  chain as osmosis,
  assets as osmosisAssetList,
} from 'chain-registry/mainnet/osmosis';
import { QuirksConfig, QuirksNextProvider } from "@quirks/react";
import { Config } from "@quirks/store";
import { keplrExtension, leapExtension } from "@quirks/wallets";
import type { AppProps } from "next/app";
 
const config: Config = {
  wallets: [keplrExtension, leapExtension],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
};
 
function App({ Component, pageProps }: AppProps) {
  return (
    <QuirksNextProvider>
      <QuirksConfig config={config}>
        <Component {...pageProps} />
      </QuirksConfig>
    </QuirksNextProvider>
  );
}

You did it 🎉! Now you can start using it as described inside quick start.

Server Side Rendering (Next.js)

Usage with App Router

Usage with Pages Router

On this page