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.


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 = [
<style dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }} />,
return {, styles: Children.toArray(styles) }
render() {
return (
<Main />
<NextScript />