diff --git a/apps/next/.eslintrc.js b/apps/next/.eslintrc.js
new file mode 100644
index 00000000..b099ddf4
--- /dev/null
+++ b/apps/next/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ extends: 'next',
+ root: true,
+}
diff --git a/apps/next/components/circle.tsx b/apps/next/components/circle.tsx
new file mode 100644
index 00000000..73779503
--- /dev/null
+++ b/apps/next/components/circle.tsx
@@ -0,0 +1,42 @@
+import { Stack, styled } from '@tamagui/core'
+
+export const Circle = styled(Stack, {
+ // access your tokens and theme values easily with $ props
+
+ backgroundColor: 'red',
+ borderRadius: '100%',
+ width: 100,
+ height: 100
+ // borderRadius: '$4',
+ // // media and pseudo styles - this would take 15+ lines of brittle JS in RN
+
+ // $gtSm: {
+ // pressStyle: {
+ // borderRadius: '$6'
+ // }
+ // },
+ // variants: {
+ // // define variants
+
+ // // these will flatten, even when nesting multiple styled() calls
+
+ // pin: {
+ // top: {
+ // position: 'absolute',
+
+ // top: 0
+ // }
+ // },
+ // size: {
+ // // functional variants give incredible power and save bundle size
+
+ // '...size': (size, { tokens }) => {
+ // return {
+ // width: tokens.size[size] ?? size,
+
+ // height: tokens.size[size] ?? size
+ // }
+ // }
+ // }
+ // } as const
+})
diff --git a/apps/next/next-env.d.ts b/apps/next/next-env.d.ts
new file mode 100644
index 00000000..2532e77a
--- /dev/null
+++ b/apps/next/next-env.d.ts
@@ -0,0 +1,4 @@
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
new file mode 100644
index 00000000..5efc78e9
--- /dev/null
+++ b/apps/next/next.config.js
@@ -0,0 +1,76 @@
+/** @type {import('next').NextConfig} */
+const { withTamagui } = require('@tamagui/next-plugin')
+const withImages = require('next-images')
+const { join } = require('path')
+
+process.env.IGNORE_TS_CONFIG_PATHS = 'true'
+process.env.TAMAGUI_TARGET = 'web'
+process.env.TAMAGUI_DISABLE_WARN_DYNAMIC_LOAD = '1'
+
+const boolVals = {
+ true: true,
+ false: false
+}
+
+const disableExtraction =
+ boolVals[process.env.DISABLE_EXTRACTION] ??
+ process.env.NODE_ENV === 'development'
+
+const plugins = [
+ // withImages,
+ withTamagui({
+ config: './tamagui.config.ts',
+ components: [],
+ importsWhitelist: ['constants.js', 'colors.js'],
+ logTimings: true,
+ disableExtraction,
+ // experiment - reduced bundle size react-native-web
+ useReactNativeWebLite: false,
+ shouldExtract: path => {
+ if (path.includes(join('packages', 'app'))) {
+ return true
+ }
+ },
+ excludeReactNativeWebExports: [
+ 'Switch',
+ 'ProgressBar',
+ 'Picker',
+ 'CheckBox',
+ 'Touchable'
+ ]
+ })
+]
+
+module.exports = function() {
+ /** @type {import('next').NextConfig} */
+ let config = {
+ typescript: {
+ ignoreBuildErrors: true
+ },
+ images: {
+ disableStaticImages: true
+ },
+ transpilePackages: [
+ // 'solito',
+ // 'react-native-web',
+ // 'expo-linking',
+ // 'expo-constants',
+ // 'expo-modules-core'
+ '@status-im/components'
+ ],
+ experimental: {
+ // optimizeCss: true,
+ // scrollRestoration: true,
+ legacyBrowsers: false
+ }
+ }
+
+ for (const plugin of plugins) {
+ config = {
+ ...config,
+ ...plugin(config)
+ }
+ }
+
+ return config
+}
diff --git a/apps/next/package.json b/apps/next/package.json
new file mode 100644
index 00000000..fcc0bc62
--- /dev/null
+++ b/apps/next/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "next-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "cd .. && yarn build && cd next && next build",
+ "start": "next start",
+ "serve": "NODE_ENV=production next start --port 8151",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@tamagui/config-base": "^1.0.3",
+ "@tamagui/core": "^1.0.3",
+ "@tamagui/next-theme": "1.0.3",
+ "next": "^13.0.6",
+ "raf": "^3.4.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-native": "0.0.0",
+ "react-native-web": "^0.18.6",
+ "@status-im/components": "*",
+ "react-native-web-lite": "^1.0.1-beta.144"
+ },
+ "devDependencies": {
+ "@tamagui/next-plugin": "1.0.3",
+ "@types/node": "^18.6.4",
+ "critters": "^0.0.16",
+ "eslint-config-next": "^13.0.4",
+ "next-images": "^1.8.4"
+ }
+}
diff --git a/apps/next/pages/_app.tsx b/apps/next/pages/_app.tsx
new file mode 100644
index 00000000..18fcd3f5
--- /dev/null
+++ b/apps/next/pages/_app.tsx
@@ -0,0 +1,44 @@
+import '@tamagui/core/reset.css'
+import '@tamagui/font-inter/css/400.css'
+import '@tamagui/font-inter/css/700.css'
+
+import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
+// import { Provider } from 'app/provider'
+import Head from 'next/head'
+import React, { useMemo } from 'react'
+// import type { SolitoAppProps } from 'solito'
+
+import tamaguiConfig from '../tamagui.config'
+
+import 'raf/polyfill'
+import { AppProps } from 'next/app'
+import { TamaguiProvider } from '@tamagui/core'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+ <>
+
+ Tamagui Example App
+
+
+
+
+
+
+
+ )
+}
+
+// function ThemeProvider({ children }: { children: React.ReactNode }) {
+// const [theme, setTheme] = useRootTheme()
+
+// return (
+//
+//
+// {children}
+//
+//
+// )
+// }
+
+export default MyApp
diff --git a/apps/next/pages/_document.tsx b/apps/next/pages/_document.tsx
new file mode 100644
index 00000000..19ecc65f
--- /dev/null
+++ b/apps/next/pages/_document.tsx
@@ -0,0 +1,43 @@
+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 }: any) {
+ // AppRegistry.registerComponent('Main', () => Main)
+ const page = await renderPage()
+
+ // @ts-ignore
+ // const { getStyleElement } = AppRegistry.getApplication('Main')
+
+ /**
+ * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
+ * So Tamagui styles can override the react-native-web styles.
+ */
+ const styles = [
+ // getStyleElement(),
+
+ ]
+
+ return { ...page, styles: Children.toArray(styles) }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/apps/next/pages/index.tsx b/apps/next/pages/index.tsx
new file mode 100644
index 00000000..7f8bcd41
--- /dev/null
+++ b/apps/next/pages/index.tsx
@@ -0,0 +1,17 @@
+import { Circle } from '../components/circle'
+import { Shape } from '@status-im/components'
+
+export default function Home() {
+ return (
+
+
+
Next.js
+
+
+
+
UI
+
+
+
+
+
Vite
+
+
+
+
UI
+
+
+