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>
)
}
}