Next.js is not supported !

[boussaidev]

Description

Next.js is not supported getting a lot of errors when using ui with latest nextjs project

CodeSandbox/Snack link

https://codesandbox.com/

Steps to reproduce

next js is not supported !
Next.js is not supported
getting a lot of errors when using ui with latest nextjs project

gluestack-ui Version

latest

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[Under-Warz]

@boussaidev add this to your next.config.ts

You have to configure react-native-web to alias all react-native import with react-native-web

import { withGluestackUI } from "@gluestack/ui-next-adapter";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
	transpilePackages: [
		"react-native-reanimated",
		"nativewind",
		"react-native-css-interop",
		"@gluestack-ui/nativewind-utils",
		"@gluestack-ui/icon",
		"@gluestack-ui/button",
		"@gluestack-ui/utils",
		"@gluestack-ui/toast",
		"@gluestack-ui/overlay",
	],
	experimental: {
		turbo: {
			resolveAlias: {
				"react-native": "react-native-web",
			},
			resolveExtensions: [
				".web.js",
				".web.jsx",
				".web.ts",
				".web.tsx",
				".mdx",
				".tsx",
				".ts",
				".jsx",
				".js",
				".mjs",
				".json",
			],
		},
	},
	webpack: (config) => {
		config.resolve.alias = {
			...(config.resolve.alias || {}),
			// Transform all direct `react-native` imports to `react-native-web`
			"react-native$": "react-native-web",
		};
		config.resolve.extensions = [
			".web.js",
			".web.jsx",
			".web.ts",
			".web.tsx",
			...config.resolve.extensions,
		];
		return config;
	},
};

export default withGluestackUI(nextConfig);

[Jao8]

@Under-Warz It almost solved things for me, still getting

 ⨯ ./node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:1
Module not found: Can't resolve 'react-native/Libraries/Utilities/codegenNativeComponent'
> 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export default codegenNativeComponent('RNCSafeAreaProvider');
  3 | //# sourceMappingURL=NativeSafeAreaProvider.js.map



https://nextjs.org/docs/messages/module-not-found



./node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:1
Module not found: Can't resolve 'react-native/Libraries/Utilities/codegenNativeComponent'
> 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | export default codegenNativeComponent('RNCSafeAreaView', {
  3 |   interfaceOnly: true
  4 | });

any tips about that?