Criando um monorepo com Lerna e Next.js
Tags: lerna, monorepo, nextjs, react
Published: 2021-07-01 00:18:22

---
title: Criando um monorepo com Lerna e Next.js
published: true
description: Criando um monorepo com Lerna e Next.js
tags: Lerna, Monorepo, Nextjs,Reactjs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu9fw838s2tbbyw05000.png
---

Usar uma estrutura monorepo para seu aplicativo pode ser muito vantajoso. Uma estrutura monorepo pode tornar mais fácil gerenciar vários aplicativos ou pacotes dependentes.

#### O que é Lerna?

Lerna é uma ferramenta que otimiza o fluxo de trabalho em torno do gerenciamento de repositórios de vários pacotes com git e npm.

#### O que é Next.js?

Next.js é uma estrutura da web de desenvolvimento front-end React de código aberto criada por Vercel que permite funcionalidades como renderização do lado do servidor e geração de sites estáticos para aplicativos da web baseados em React.

Vamos começar instalando o Lerna globalmente

``` yarn global add lerna ```

Em seguida precisamos criar uma pasta para nosso projeto

``` mkdir poc-lerna ```

Agora podemos executar o comando init do Lerna na pasta que criamos

``` lerna init ```

![Print do comando lerna init rodado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b3s8pzjg8yvrmwk63tg.png)

Esse comando vai gerar essa estrutura no seu projeto

![Estrura do projeto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fai2r5r0grzw3q6yaert.png)

#### Criando o pacote de front-end

Vamos criar nossa aplicação front-end utilizando o Next.js dentro de packages

``` cd packages && yarn create next-app ```

Agora a estrutura do projeto vai ficar desse jeito

![Estrutura do projeto após instalar o next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u3b2qrg724cw10vg8tw.png)

#### Criando o pacote de componentes

O pacote de componentes vai ficar dentro da pasta packages e é nele que vamos criar os componentes utilizando o React que sera consumido dentro da aplicação front-end

Para criar esse pacote vamos utilizar o comando do Lerna

``` lerna create components ```

> na linha entry point coloque dist/index.js, caso não tenha colocado abra o arquivo package.json dentro de componente e altere o valor de main para dist/index.js

![Print do comando Lerna utilizado para criar o pacote de componente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddypdhcw5ouhy9v7nm4q.png)

Agora a estrutura do projeto vai ficar desse jeito

![Estrutura do projeto após criar o pacote de componentes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc7yk7ukhzv6bc84z41l.png)

Vamos adicionar microbundle ao nosso pacote de componentes

##### O que é microbundle?

Microbundle é um agrupador de zero configuração para módulos minúsculos, ele é um wrapper em torno de rollup.

``` cd packages/components && yarn add microbundle -D ```

Agora vamos alterar o script do pacote de componente para utilizar o microbundle


```
// packages/components/package.json

"scripts": {
   ..
   "dev": "microbundle watch --jsx React.createElement lib/*.js"
 },
```

Além disso, vamos adicionar um source apontando para um aquivo de index.js dentro de lib no arquivo package.json

```
// packages/components/package.json

"source": "lib/index.js",
```

Agora já podemos executar nossos pacotes utilizando o lerna, e caso tudo esteja certo vamos ver esse retorno no terminal

```lerna run dev```

![Retorno do comando lerna run dev no terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9948e58mi4hc1n5vcif8.png)

Após esse comando conseguimos acessar nossa aplicação front-end acessando http://localhost:3000

![Aplicação front-end rodando no localhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvh0il75nupbh3bssd9z.png)

Podemos também rodar nossos pacotes utilizando o comando acima passando --parallel, com isso conseguimos ver no terminal a compilação de ambos os pacotes mais detalhado.

##### Adicionando nosso pacote de componentes na aplicação front-end

Para fazer isso, podemos simplesmente adicionar o pacote de componentes no arquivo package.json do pacote front-end

```
// packages/front-end/package.json

"dependencies": {
   ..
   "components": "0.0.0"
 }
```

Estamos utilizando a versão 0.0.0 pois é a mesma versão que esta no package.json do nosso pacote de components 

##### Criando um componente

Para criar nosso componente precisamos primeiro adicionar o React dentro pacote de componentes

```cd packages/components && yarn add react -D```

Vamos criar um componente Button e importa-lo em nossa aplicação

```
// packages/components/lib/Button/index.js

import React, { Fragment } from "react";

const Button = ({ onClick, children }) => {
  return (
    <>
      <button className="button" onClick={onClick}>{children}</button>
      <style jsx="true">
        {`
          .button  {
            margin: 20px 0;
            background-color: #0070f3;
            border: 0;
            cursor: pointer;
            color: #FFFFFF;
            font-size: 1.3em;
            padding: 8px 16px;
          }
        `}
        </style>
    </>
  );
};

export default Button;

export default Button;
```
Vamos criar um arquivo index.js dentro de lib e exportar esse componente

```
// packages/components/lib/index.js

"use strict";

import Button from "./Button";

module.exports = {
 Button
};
```

Agora, podemos importar este componente em nosso pacote de front-end

```
// packages/front-end/pages/index.js

import Head from "next/head";
import { Button } from "components";

const Home = () => (
 <div className="container">
     ..
     <Button 
       onClick={() => console.log("button clicked!")}
     >
       Click me
     </Button>
     ..
 </div>
);

export default Home;
```

Antes de rodar o projeto vamos rodar o comando do Lerna para vincular os pacotes locais e instalar as dependências de pacotes restantes

```lerna bootstrap```

Para finalizar vamos rodar novamente nosso projeto e visualizar a aplicação front-end no navegador, se você clicar no botão pode verificar no console que foi printado o texto button clicked!

```lerna run dev```

![Print da tela do navegador mostrando o botão adicionado na aplicação](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5ji7hwl9ucfn4eswadb.png)

É isso! Esse é um exemplo simples de criar um monorepo com Lerna e Next.js e eu sei que existe outras maneiras de fazer isso, mais é uma base legal para entender um pouco de monerepo com Lerna e evoluir.

Aqui está o código completo deste artigo: [lerna-with-nextjs](https://github.com/hjdesigner/lerna-with-nextjs)

Caso queira se aprofundar no assunto

[Lerna](https://github.com/lerna/lerna)
[Microbundle](https://github.com/developit/microbundle)
[Next.js](https://nextjs.org/)

----------------

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.