menu
up-caret
down-caret

Next.js

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

# General

General Chatter

Trending conversations
I am trying to add React OWL Carousel.
@adilsaeed31 · 14h
Hi Guys, I'm planning to add media='print' attribute to css files to move them…
@ravikolla · 20h
What is the best way to get (fetch) data in getInitialProps which depends on…
@dmytro-lymarenko · 12h
next-routes not working with next 7 ?
@kokno · 11d
How should a nested layout be implemented?
@seekcx · 39d

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

Next.js/General · August 8, 2018 at 11:10pm

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

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

@stevenlangbroek @josephluck

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

I'm largely doing something like this: https://medium.com/viewstools/how-to-use-yarn-workspaces-with-create-react-app-and-create-react-native-app-expo-to-share-common-ea27bc4bad62

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

@stevenlangbroek @josephluck

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

You can use this plugin! https://github.com/wellcometrust/next-plugin-transpile-modules

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

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

@clayh

One important thing to know is, you have to put a .babelrc in the shared folder too

  • reply
  • like

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

@morajabi 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 @clayh, 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:

https://github.com/josephluck/next-plugin-custom-babel-config

Let me know how you get on and if I can help at all.

  • reply
  • like

December 18, 2018 at 7:23pm

thanks @josephluck. 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:

https://josephluck.co.uk/blog/next-typescript-monorepo/

If you prefer to see some code, I've also set up an example repo here:

https://github.com/josephluck/next-typescript-monorepo

like-fill
1
  • reply
  • like

February 15, 2019 at 3:38pm

Thank you @josephluck 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/@jacoboakley/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:

https://github.com/josephluck/internote

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

@josephluck 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:

https://github.com/josephluck/internote

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(...["@internote"]...) 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