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
.
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-ignoreconst { 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>)}}