normad's web3 blog

rainbowkit nextjs-13 upgrade

rainbowkit nextjs-13 upgrade

app dir for your dapp

Norman Saadé's photo
Norman Saadé
·

2 min read

Here is a step by step guide how to use the nextjs-13 /app dir quickly:

  • initialize rainbowkit scaffold (rainbow docs)

    npm init @rainbow-me/rainbowkit@latest

  • upgrade nextjs-version (vercel docs)

    npm install next@latest react@latest react-dom@latest eslint-config-next@latest

  • enable experimental in next.config.js

    experimental: {
  // Required:
  appDir: true,
},

  • add /app folder to your root dir and create layout.tsx and page.tsx Screenshot 2022-11-03 at 11.55.57.png

  • move pages/_app.tsx content to app/layout.tsx. Make sure you state "use client" at the beginning of the file. This in my layout.tsx file:

    export default function RootLayout({children,} : { children: React.ReactNode}) {
const { chains, provider } = configureChains(
  [ chain.goerli],
  [
    alchemyProvider({ apiKey: '_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC' }),
    publicProvider()
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'RainbowKit App',
  chains
});

const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider
})

return (
  <html>
    <head></head>
    <body>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains}>
          {children}
        </RainbowKitProvider>
      </WagmiConfig>
    </body>
  </html>
)
}

  • move pages/index.tsx content to app/page.tsx. Make sure you state "use client" at the beginning of the file. This in my page.tsx file: 

    export default function Page() {
return (
  <div className={styles.container}>
    <Head>
      <title>RainbowKit App</title>
      <meta
        name="description"
        content="Generated by @rainbow-me/create-rainbowkit"
      />
      <link rel="icon" href="/favicon.ico" />
    </Head>

    <main className={styles.main}>
      <ConnectButton />

      <h1 className={styles.title}>
        Welcome to <a href="">RainbowKit</a> + <a href="">wagmi</a> +{' '}
        <a href="https://nextjs.org">Next.js!</a>
      </h1>

      <p className={styles.description}>
        Get started by editing{' '}
        <code className={styles.code}>pages/index.tsx</code>
      </p>

      <div className={styles.grid}>
        <a href="https://rainbowkit.com" className={styles.card}>
          <h2>RainbowKit Documentation &rarr;</h2>
          <p>Learn how to customize your wallet connection flow.</p>
        </a>

        <a href="https://wagmi.sh" className={styles.card}>
          <h2>wagmi Documentation &rarr;</h2>
          <p>Learn how to interact with Ethereum.</p>
        </a>

        <a
          href="https://github.com/rainbow-me/rainbowkit/tree/main/examples"
          className={styles.card}
        >
          <h2>RainbowKit Examples &rarr;</h2>
          <p>Discover boilerplate example RainbowKit projects.</p>
        </a>

        <a href="https://nextjs.org/docs" className={styles.card}>
          <h2>Next.js Documentation &rarr;</h2>
          <p>Find in-depth information about Next.js features and API.</p>
        </a>

        <a
          href="https://github.com/vercel/next.js/tree/canary/examples"
          className={styles.card}
        >
          <h2>Next.js Examples &rarr;</h2>
          <p>Discover and deploy boilerplate example Next.js projects.</p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          className={styles.card}
        >
          <h2>Deploy &rarr;</h2>
          <p>
            Instantly deploy your Next.js site to a public URL with Vercel.
          </p>
        </a>
      </div>
    </main>

    <footer className={styles.footer}>
      <a href="https://rainbow.me" target="_blank" rel="noopener noreferrer">
        Made with ❤️ by your frens at 🌈
      </a>
    </footer>
  </div>
);
};

P.S. This is my first ever coding tutorial. Feedback warmly appreciated ❤️

rainbowkitNext.jsdapp