menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

Getting Next.js to see shared code in Yarn Monorepo?

August 8, 2018 at 11:10pm
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Getting Next.js to see shared code in Yarn Monorepo?

August 8, 2018 at 11:10pm
I am currently unable to get my Next.js application inside of my Yarn monorepo to see shared code. Is there any steps I should be taking, such as my config, to get everything linked up? Thanks a ton for your time.

August 9, 2018 at 7:35am
Can you elaborate a bit more on the project structure? The next.js app is one package of multiple? Where is the shared code you're trying to access? In another package?
  • reply
  • like
- we managed to get yarn workspace packages set up for our repository - would you be able to share your code somewhere? I can help out if I can!
  • reply
  • like

August 9, 2018 at 6:02pm
Thanks for the replies! I'm actually starting several Next.js apps from scratch concurrently. I have these each as their own package. I also have another package that is going to be a React component library. I have been able to properly hook up the component library to create-react-app projects just from Googling, but am at a loss on how to wire Next.js apps.
Monorepo structure might look something like:
packages
-NextJSProj1
-NextJSProj2
-ComponentLib
  • reply
  • like
But instead of CRA/CRNA, I was hoping to have a Next.js project that can also share components with other applications.
  • reply
  • like

August 10, 2018 at 7:23am
Thanks for the replies! I'm actually starting several Next.js apps from scratch concurrently. I have these each as their own package. I also have another package that is going to be a React component library. I have been able to properly hook up the component library to create-react-app projects just from Googling, but am at a loss on how to wire Next.js apps.
Monorepo structure might look something like:
packages
-NextJSProj1
-NextJSProj2
-ComponentLib
I'm using it in a monorepo structure, and it's matches the structure you provided above, and it did works!
Let me know if it does work for you too :)
  • reply
  • like
I've spent a lot of time setting up something exactly like this but with pnpm. I'd love to show you, just have to clean it up a bit first.
  • reply
  • like
One important thing to know is, you have to put a .babelrc in the shared folder too
  • reply
  • like
I've spent a lot of time setting up something exactly like this but with pnpm. I'd love to show you, just have to clean it up a bit first.
Which Next version it was? Since v5 with plugins it's less bit of a pain :)
  • reply
  • like
I am on 6 unfortunately. Is there possibly example code I would be able to peek at? I'm a little bit at a loss for how to get this all going! Thanks!
  • reply
  • like

August 14, 2018 at 12:55pm
Since v5, includes 6 as well!
  • reply
  • like

December 17, 2018 at 11:17pm
hi , were you able to get this working?
  • reply
  • like

December 18, 2018 at 9:43am
Hey all, since Next uses a newer version of babel, the root level `.babelrc` no longer works. Instead, you need to add a root level `babel.config.js` file and use a next.js plugin to have next's babel-loader resolve the shared config file:
Let me know how you get on and if I can help at all.
  • reply
  • like

December 18, 2018 at 7:23pm
thanks . Do you know if this Next examples, solves the problem as well? https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces
  • reply
  • like

December 23, 2018 at 11:41am
Yes, however you won't be able to use a custom babel config with that example (the default next-babel-loader will be used). I'm working on the post that explains how a yarn monorepo, typescript and custom babel config works.
  • reply
  • like

December 24, 2018 at 10:11am
As well, the above example doesn't hot-reload (something I'm still figuring out how to get working with yarn workspaces!)
  • reply
  • like

December 29, 2018 at 6:38pm
As promised, I've written a blog post explaining how to set up a Next.js monorepo with TypeScript and custom Babel config:
If you prefer to see some code, I've also set up an example repo here:
like-fill
1
  • reply
  • like

February 15, 2019 at 3:38pm
Thank you for the post. It is awesome! I wonder how the deployment will look like with the monorepo setup. For instance, if one follows this post (https://medium.com/deploy-a-next-js-app-on-heroku-69bcb01db1b7) and wants to deploy next.js app on heroku. What should steps look like?
  • reply
  • like
I haven't had time to write a post explaining the steps, but I recently converted a full-stack monorepo typescript app to serverless (deployed to AWS lambda via serverless)
The repo is here:
I've been too busy with work to put together the post, but when I do, I'll be sure to update this thread!
like-fill
1
  • reply
  • like

February 16, 2019 at 2:09am
thanks again. I have tried to deploy next.js with zeit now v2. It now comes with the serverless option, but could not make it work. Any pages with the dynamic content do not server-side render. Have you tried zeit now? Can you please take a look at this issue? https://github.com/zeit/now-cli/issues/1889
Edited
  • reply
  • like

March 5, 2019 at 4:15pm
I haven't had time to write a post explaining the steps, but I recently converted a full-stack monorepo typescript app to serverless (deployed to AWS lambda via serverless)
The repo is here:
I've been too busy with work to put together the post, but when I do, I'll be sure to update this thread!
That repo you created is going to be super helpful for me. Thanks so much for posting it. A quick question: I see from your package.json that you're using slate for documenting your api. It looks cool, but I'm assuming there's a Ruby dependency?
Also, I see the nohoist flag inside your yarn workspace's package.json. What's the specific use case that's requiring that? I know the option keeps some packages inside the local sub-package's node_modules folder, but which functionality are you enabling with this?
Is it related to the withTranspile(...[""]...) call that you make later?
Edited
  • reply
  • like
It's actually a note taking app - slate is a WYSIWYG
  • reply
  • like
It's actually a note taking app - slate is a WYSIWYG
Ah, I see that now. "Slatejs" turns it up on github, thanks.
  • reply
  • like