Reuse Component from NextJS App into other React project

[imranweb]

Summary

I have a NextJS website and want to expose the Header component so that other React app (SSR) can use this.
What is the best strategy to use the Components from NextJS app in other SSR based React app?

Additional information

No response

Example

No response

[ArnaudBand]

A great approach for optimizing the reusability of your Next.js Header component is to design it as a library. Once developed in this manner, you can easily incorporate and utilize it across various React applications as needed.

Follow these steps:

1. Create an npm package:

   • Organize your Header component code and related files into a separate directory within your Next.js project.
   • Set up the necessary files for an npm package, including package.json.

2. Publish the npm package:

   • Use a tool like npm publish to publish your package to the npm registry.

3. Install in other React apps:

   • In your other SSR-based React applications, install the npm package using npm install or yarn add.

4. Import and use the Header component:

   • In the React components of your other applications, import the Header component from the npm package.
   • Integrate it into the application's structure just like any other React component.

By organizing your Header component as an independent npm package, you decouple it from the specific Next.js project. This allows other SSR-based React applications to easily incorporate and benefit from the reusable Header component. Additionally, it enables versioning and updates independently of the main projects, fostering modularity and maintainability.

[ayhanap]

This sounds like AI gen. Either way this sounds to be the only easy way of doing it. I was trying to publish my components while they are sitting inside my NextJS app. But the tooling conflict is too much to bear.

[gilzonme]

https://www.npmjs.com/package/reusekit