Any package or CRA integration for Next.js

[5ervant]

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!

[brunolemos]

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.

[luizcarlospedrosogomes]

@servant news?

[5ervant]

@luizcarlospedrosogomes I suggest to use https://expo.io/ if you're looking to have a multi-platform application.

[luizcarlospedrosogomes]

@5ervant you have repository example com expo multi-plataform and next.js?

[5ervant]

@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/

[kenchoong]

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

[luizcarlospedrosogomes]

the question is: is a complex application like an ecomerce worth using RNW and in monorepo? Where could I ask this question?