Server Side Rendering (Next.js)

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

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