Skip to content

What is your experience with shared nextJS components for different projects ? #3623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
vanGalilea opened this issue Jan 26, 2018 · 10 comments
Closed

What is your experience with shared nextJS components for different projects ? #3623

vanGalilea opened this issue Jan 26, 2018 · 10 comments

Comments

@vanGalilea
Copy link

vanGalilea commented Jan 26, 2018 •
edited
Loading

Hi all,

What is your experience regarding an external shared nextJS components module and it's implementation in different projects.
Basically what we have now is 2 projects that have around 80% of the same code (react components) and we would like to have the 80% code reusable in both nextJS projects (and other future projects).

We currently have an external modules using nextJS with the reusable components, which is linked with npm link to the 2 projects that using the reusable models, everything is going well besides one problem we're experiencing:

The styles of an imported reusable component (written in styled-jsx) are being loaded few seconds after the html is being loaded (so basically you see an image with no style and around 500 ms later you see that the style kicks in).

So how can you make sure there is no delay when loading the styling and would could be the problem causing it ?

And last but not least what is your experience with shared components and later reusing them in different projects ?

tnx
@dav-is
Copy link
Contributor

dav-is commented Jan 26, 2018

Sounds like either SSR isn’t setup for your CSS, or the SSR’s CSS isn’t in the head.

@vanGalilea
Copy link
Author

The css is being loaded oke, but with with delay.

@timneutkens
Copy link
Member

The problem is that there's 2 versions of styled-jsx in this case. And styled-jsx uses a singleton module to keep track of the styles that are rendered on the server. Next.js v5 will allow you to customize the webpack configuration to include certain modules to be transpiled. Removing the requirement to have styled-jsx as a dependency. Which will solve this issue 👍

@timneutkens
Copy link
Member

More improvements for code sharing are planned for after v5 👍

@tomaswitek
Copy link
Contributor

FYI @vanGalilea @timneutkens I've had a similar problem with styled-components. You can't use 2 instances of styled-compoennts right now as well. styled-components/styled-components#1324 (comment)

@tomaswitek
Copy link
Contributor

tomaswitek commented Feb 6, 2018 •
edited
Loading

Since Zones are already released. (Thx @arunoda and @timneutkens !!!)
I think a lot of questions about sharing code will arise now.
That's why I wanted to prepare an example with shared component in the with-zones example.
My idea was to use yarn workspaces together with monorepo approach.
Something simliar was merged a few days ago by the CRA community.
The question is how do we automatically transpile those shared components?
@timneutkens, @arunoda do you have an idea? Is this PR your solution? #3319
Here is my actual state: https://github.com/tomaswitek/next.js/tree/feature/workspaces-with-zones/examples/with-zones

@merrywhether
Copy link

I've run into this same issue, developing a shared component library of components that use styled-jsx resulting in FOUC. Is vercel/styled-jsx#64 the solution to this problem?

@rowlandekemezie
Copy link

@tomaswitek Were you able to push further than this ^? How do you handle transpilation of the shared components and ensure that changes in the shared components are automatically reflected in the workspaces?

@merrywhether
Copy link

merrywhether commented Jun 11, 2018 •
edited
Loading

As an update, I've worked around the FOUC from a library of shared components by exporting a "bound" version of the styled-jsx flush methods, and then in _document.js's getInitialProps, I do something like:

const page = context.renderPage();
const sharedStyles = sharedFlush();  // import { sharedFlush } from 'common-components';
...
return {
  ...page,
  sharedStyles,
  ...
};

And then in the associated render():

return (
  <html>
    <Head>
      {this.props.sharedStyles}
  ...
);

(next itself takes care of flushing and rendering all of the styled-jsx in your app proper)

This is a nice way to workaround vercel/styled-jsx#64.

@timneutkens
Copy link
Member

Let's track this in #706

@lock lock bot locked as resolved and limited conversation to collaborators Jan 1, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@tomaswitek @merrywhether @timneutkens @dav-is @rowlandekemezie @vanGalilea