Using NextJS In A MonoRepo
By: Malcolm Laing
Tags: Nextjs, JavaScript, React, Frontend, Programming

Using NextJS In A MonoRepo

Share your code with ease

Photo by Артемий Савинков on Unsplash

When you work with a monorepo, you keep all of your isolated components and utilities inside of one repository. Instead of having to keep multiple repositories in sync, we keep everything in one place. With a monorepo, you could keep your component library, your Android app, and your website all in one repository.

NextJS is a framework made by Zeit. They describe it as “Production grade React applications that scale”. By using NextJS, we can abstract away the difficult parts (build configurations, server-side rendering, etc) and concentrating on building our apps.

Unfortunately, using NextJS inside a monorepo takes a little bit of setup. Let’s dig into it!

Creating the monorepo

We want to create a new monorepo with the following structure.

packages

components

website

Start by creating a new directory, and running npm init.

mkdir monorepo-nextjs

cd monorepo-nextjs

npm init

Then we use workspaces to turn our project into a monorepo. Make the following modification to the root package.json .

{

"name": "@monorepo",

"private": "true",

"version": "1.0.0",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"workspaces": [

"packages/*"

],

"license": "MIT"

}

Make sure that you don’t forget to set private to true, and that you add the field workspaces .

Next, we create the directory where our packages will live.

mkdir packages

Creating our first package

Now, let’s create our frontend application with create-next-app. This allows us to quickly start a new NextJS application.

npx create-next-app packages/website

Let’s run our NextJS application to make sure it works. Run the following from the root directory. Our app should compile and run on localhost:3000 . Using --cwd tells yarn to use packages/website as it’s current working directory .

yarn --cwd packages/website dev

Open your browser to make sure it’s working. It should look like this screenshot.

NextJS running in our browser

Adding another package

Now that we have created our website package, it’s time to add another. Let’s create our components package.

Create a new directory called packages/components and run npm init to initialize the package.

mkdir packages/components

cd packages/components

npm init

Next, we need to install some dependencies. Our components package will be where we keep generic React components. So let’s install react and react-dom . Run yarn add react react-dom to install both dependencies.

Now that we have created our components package, let’s add a component. Create a file called Button.js .

import React from "react"; export const Button = props => {

return <button {...props}>{props.children}</button>;

};

Now that we have our first component, let’s use it inside of our website package. Start by adding @monorepo/components as a dependency. Then, modify _app.js in our nextjs application to use our new component.



import { Button } from " import Head from "next/head";import { Button } from " @monorepo/components /Button"; const Home = () => (

<div className="container">

<Head>

<title>Create Next App</title>

<link rel="icon" href="/favicon.ico" />

</Head>

<h1 className="title">

Welcome to <a href="

</h1> Welcome to https://nextjs.org ">Next.js! <Button>Hello World</Button>

</main>

</div>

);

Now when we run our NextJS application, we see an error.