Any package or CRA integration for Next.js
5ervant opened this issue · 7 comments
Do you think it's possible to integrate "packages/web/" into /zeit/next.js/tree/master/examples/with-react-native-web in case we need a SSR for other web pages, or react-native-web
navigation isn't a good fit for Next.js?
Any guide how can I setup /zeit/next.js/tree/master/examples/with-react-native-web to be one of the packages of this monorepo? Thanks!
Hi, nextjs has an official example with react-native-web so I believe it should work fine! But I haven’t tried so I don’t know if it would work well on a monorepo. Let us know here if you try.
@servant news?
@luizcarlospedrosogomes I suggest to use https://expo.io/ if you're looking to have a multi-platform application.
@5ervant you have repository example com expo multi-plataform and next.js?
@luizcarlospedrosogomes I have a Next.js application with Expo for web.
Come and see it at: https://techintel.github.io
I didn't open source the code yet.
Next.js with Expo is quite challenging because you need to implement both Next.js side and react-native
side.
I believe creating CRA and react-native
platform app is pretty straight forward with Expo.
Here are my site's static HTML exported files: https://github.com/techintel/techintel.github.io/
For next.js, you need to transpile your code in order next.js can use the component outside the project directory.
I assume you already install next.js example to your project.
Your file structure will be like this:
|myproject
|-packages
|--components
|---src
|----TestComponent.js
|--web
|---other file and directory for next.js
|---pages
|----example.js
In this case, do as follow:
First, install this package in your root
directory
yarn add next-transpile-modules
then in your next.config.js
const withTM = require("next-transpile-modules")(["components/src"]);
module.exports = withTM({
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.ts',
'.web.tsx',
...config.resolve.extensions,
];
return config
},
});
then in your page example.js
you can use the component like this:
import React from 'react'
import MyExampleComponent from 'components/src/TestComponent'
export default function Example() {
return(
<MyExampleComponent/>
)
}
the question is: is a complex application like an ecomerce worth using RNW and in monorepo? Where could I ask this question?