#Sharing code between next app and react native

1 messages · Page 1 of 1 (latest)

tropic grotto
#

How can I share code between a react native and nextjs app?
I would like to have a folder structure with "web" for the next app, "mobile" for the react native app, and "common" for shared code.

desert robinBOT
#

Hi @tropic grotto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, you can use a monorepo structure to share code between your Next.js and React Native applications. This can be achieved using Yarn workspaces.

Here's a high-level overview of how you can structure your project:

root/
 web/ (Next.js application)
 mobile/ (React Native application)
 common/ (Shared code)

Each of these folders would be a Yarn workspace, and they would each have their own package.json file with dependencies. When you run the yarn command, everything will be installed and linked in the root node_modules.

To create a shared library workspace with a utility function, you can follow these steps:

  1. Create a new common directory for code that will be shared within the monorepo.
  2. Initialize it with yarn.
mkdir common
cd common
yarn init
  1. Create a function that you can use in both the web and mobile applications. This function could output shared data or perform shared logic.

Create an index.js file inside root/common with the following content:

const SHARED_DATA = {
 // Your shared data here
};


export function getSharedData() {
 return SHARED_DATA;
}

This is a simplified example, and your shared code could be more complex, including shared components, utilities, hooks, etc.

Please note that this is a high-level overview and the actual implementation might require additional steps depending on the specifics of your project.

For more detailed information, you can refer to the Vercel guide on deploying Yarn monorepos (https://vercel.com/guides/deploying-yarn-monorepos-to-vercel).

#

Please note that while this approach allows you to share code between a Next.js and a React Native application, there might be limitations due to the differences between web and native environments. Always ensure that the shared code is platform-agnostic and does not rely on web-specific or native-specific APIs unless properly abstracted.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tropic grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

tropic grotto
#

Thanks @desert robin 🙂 What are alternative to yarn workspaces? If I want to stick with npm

desert robinBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If you prefer to stick with npm, you can use a tool like Lerna (https://lerna.js.org/). Lerna is a popular tool for managing JavaScript projects with multiple packages, making it possible to organize your project into multi-package repositories.

However, the information extracts provided do not contain specific instructions or examples on how to set up a monorepo with Lerna or npm. For detailed instructions, you may want to refer to the official Lerna documentation or other reliable resources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tropic grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

tropic grotto
#

@desert robin how to fetch data from an api in the app router, to display the data in a page?

desert robinBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, you can fetch data in the App Router using the familiar async and await syntax. By default, all components are React Server Components, so data fetching happens securely on the server. Here's an example:

export default async function Page() {
 const res = await fetch('<https://api.example.com/...'>);
 // The return value is *not* serialized
 // You can use Date, Map, Set, etc.
 const data = res.json();
 
 return '...';
}

In this example, fetch is used to get data from an API endpoint. The data is then processed and returned. This function can be used in your page component to fetch and display data.

Remember, the "data fetching is up to the developer” principle is realized. You can fetch data and compose any component. And not just first-party components, but any component in the Server Components ecosystem.

For more details, you can refer to the Next.js documentation on data fetching (https://nextjs.org/docs/app/building-your-application/data-fetching).

Please note that the URL '<https://api.example.com/...'> is just a placeholder. You should replace it with the actual URL of the API you want to fetch data from.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tropic grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

tropic grotto
#

is it ok to use async code in a component @desert robin ?

desert robinBOT
#

Let me check the knowledge base for you. One moment! :books:

#

According to the React Server Component RFC on promise support (https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md), client components cannot be async functions.

If you try to use an async function as a client component, you will encounter an error message: "Client components cannot be async functions."

To fix this, you can:

  1. Remove the async keyword from the client component function declaration, or
  2. Convert the client component to a server component

However, in the context of Next.js, you can use async functions in server components and in data fetching methods like getServerSideProps or getStaticProps.

For more details, you can refer to the Next.js documentation on this error (https://nextjs.org/docs/messages/no-async-client-component).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tropic grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

tropic grotto
#

@desert robin what css in js library are compatible with server components? I like to use prop based styling, like <Stack direction="row"/>

desert robinBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided extracts, the following CSS-in-JS libraries are supported in Client Components in the app directory:

However, it's important to note that CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including concurrent rendering (https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react).

For prop-based styling like <Stack direction="row"/>, you might want to consider using a library like @mui/material which supports this kind of API. However, you should verify whether the library supports Server Components and the latest version of React.

For more details, you can refer to the Next.js documentation on CSS-in-JS (https://nextjs.org/docs/app/building-your-application/styling/css-in-js).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tropic grotto kapa.ai is still learning and improving, please let us know how it did by reacting below

tropic grotto
#

@desert robin do i need to install jest or vitest or something with next or does it come preinstalled?

desert robinBOT
#

Let me check the knowledge base for you. One moment! :books: