Server Side Rendering (Next.js) - Using Cookies

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/next

Usage with App Router

Create a providers.tsx file:

/app/providers.tsx

"use client";
 
import {
   as ,
   as ,
} from 'chain-registry/mainnet/osmosis';
import {  } from "@quirks/react";
import { Config } from "@quirks/store";
import { ,  } from "@quirks/wallets";
import {  } from "@quirks/next";
import {  } from "react";
 
const  = ({
  : [, ],
  : [],
  : [],
});
 
export const  = ({  }: <unknown>) => {
  return < ={}>{}</>;
};

Import it inside your layout.tsx:

/app/layout.tsx

// @filename: layout.tsx
import {  } from "react";
import {  } from "./provider";
 
export default function ({
  ,
}: {
  : React.;
}) {
  return (
    < ="en">
      <>
        <>{}</>
      </>
    </>
  );
}

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 {
   as ,
   as ,
} from 'chain-registry/mainnet/osmosis';
import {  } from "@quirks/react";
import { Config } from "@quirks/store";
import { ,  } from "@quirks/wallets";
import {  } from "@quirks/next";
import type {  } from "next/app";
 
const  = ({
  : [, ],
  : [],
  : [],
});
 
function ({ ,  }: ) {
  return (
    < ={}>
      < {...} />
    </>
  );
}

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