Quirks

Guide on setting up Server Side Rendering (SSR) with Next.js using cookies for session storage.

A good alternative to the usage of QuirksNextProvider is to use cookies to store session data, which can also be useful for the server. Additionally, this method allows for the use of React Server Components with quirks.

Notice

This functionality requires @quirks/store version 0.25.0 or higher

Note

I use this approach for the homepage of this site!

Installation

Install the package

npm install @quirks/ssr

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 } from "@quirks/react";
import { Config } from "@quirks/store";
import { keplrExtension, leapExtension } from "@quirks/wallets";
import { generateConfig, initialStateWithCookie } from "@quirks/ssr";
import { PropsWithChildren } from "react";
 
const config = generateConfig({
  wallets: [keplrExtension, leapExtension],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
});
 
export const Provider = ({ children, quirksInitialState }: PropsWithChildren<{ quirksInitialState?: string }>) => {
  const quirksConfigWithCookie = initialStateWithCookie(
    config,
    quirksInitialState,
  );
 
  return <QuirksConfig config={quirksConfigWithCookie}>{children}</QuirksConfig>;
};

Import it inside your layout.tsx:

/app/layout.tsx

// @filename: layout.tsx
import { ReactNode } from "react";
import { cookies } from "next/headers";
import { Provider } from "./provider";
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  /* From NextJS 15 `cookies` are async */
  const results = await cookies();
  const quirksInitialState = results.get("quirks")?.value;
 
  return (
    <html lang="en">
      <body>
        <Provider quirksInitialState={quirksInitialState}>{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 } from "@quirks/react";
import { Config } from "@quirks/store";
import { keplrExtension, leapExtension } from "@quirks/wallets";
import { generateConfig, initialStateWithCookie } from "@quirks/ssr";
import { getCookie } from "cookies-next";
import type { AppProps } from "next/app";
import type { InferGetServerSidePropsType, GetServerSideProps, GetServerSidePropsContext } from "next";
 
const config = generateConfig({
  wallets: [keplrExtension, leapExtension],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
});
 
export const getServerSideProps = (async ({ req, res }: GetServerSidePropsContext) => {
  const quirksInitialState = await getCookie('quirks', { req, res });
  
  return {
    props: { quirksInitialState: quirksInitialState || null }
  }
}) satisfies GetServerSideProps<{ quirksInitialState: string | null }>
 
function App({ Component, pageProps, quirksInitialState }: AppProps & InferGetServerSidePropsType<typeof getServerSideProps>) {
  const quirksConfigWithCookie = initialStateWithCookie(
    config,
    quirksInitialState,
  );
 
  return (
    <QuirksConfig config={config}>
      <Component {...pageProps} />
    </QuirksConfig>
  );
}

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

Server Side Rendering (Next.js) - Using Cookies

Installation

Usage with App Router

Usage with Pages Router

On this page