Next.js Guide

How to set up Tamagui with Next.js

We're putting together a better guide soon!

If you'd like to get a good idea of a set up with Next.js both this site and the create-tamagui-app default template use it.

Check out the source for this site to see a good example, especially the next.config.js and tamagui.config.ts.

_document.tsx

You'll want to set up a _document.tsx and gather both the react-native-web style object using AppRegistry, as well as Tamagui styles using Tamagui.getCSS() into the head element:

import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { Children } from 'react'
import { AppRegistry } from 'react-native'

import Tamagui from '../tamagui.config'

export default class Document extends NextDocument {
  static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent('Main', () => Main)
    const page = await renderPage()
    // @ts-ignore
    const { getStyleElement } = AppRegistry.getApplication('Main')
    const styles = [
      getStyleElement(),
      <style dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }} />,
    ]
    return { ...page, styles: Children.toArray(styles) }
  }

  render() {
    return (
      <Html>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Developing

Expo

Edit this page on GitHub.

Getting Started

Core

Tamagui

Separate Components

Extras

Guides

Community

Next.js Guide

_document.tsx