Criando nosso projeto Next.js

Criando nosso projeto Next.js.md

Criando nosso projeto Next.js

Vamos incluir o Next.js no projeto e alterar o componente que fizemos para ser usado.
Vá até o arquivo package.json na raiz do projeto e altere a tag "compile" dentro de "scripts" para "build" conforme abaixo

"build": "tsc",

Agora na raiz do projeto, crie um pasta chamada "core" e mova todos os arquivos do projeto para lá, menos o arquivo "gitignore".
Então crie um arquivo "package.json" na raiz novamente, com o conteúdo abaixo

{
    "name": "bank",
    "version": "1.0.0",
    "description": "",
    "main": " ",
    "private": true,
    "workspaces": [
        "core",
        "web"
    ]
}

Vamos criar o projeto Next.js, na raiz crie uma pasta "web" e execute os comandos abaixo dentro da pasta

npm init -y
npm install next@13.5.3 react@18.2.0 react-dom@18.2.0

Após o projeto do Next ser criado, vá até o arquivo "package.json" dentro da pasta "web" e dentro de "dependencies", adicione a linha abaixo

    "core": "*",

Depois dentro de scripts, substitua pelas linhas abaixo

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Na pasta "core" altere o arquivo "package.json" na propriedade "name", conforme abaixo

  "name": "core",

Vá no terminal, na raiz do projeto e execute o comando abaixo

npm install -w web 

Vamos adicionar um código no Next.js que irá chamar a classe Conta.
Na pasta "web", crie uma pasta "pages" e outra pasta "api" dentro dela.
Depois crie o arquivo "index.ts" com o conteúdo abaixo

import { NextApiRequest, NextApiResponse } from "next";
import { Conta } from "core/src/model/Conta";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const conta: Conta = new Conta("123456", 2000.0)
  res.status(200).json({ valor: conta.saldo });
}

Crie o arquivo "next.config.js" dentro da pasta "web" com o conteúdo abaixo

/** @type {import('next').NextConfig} */
const nextConfig = {
    transpilePackages: ["core"],
}
module.exports = nextConfig

Volte no terminal, na raiz do projeto e execute

npm run build --workspaces

Aguarde ambos os projetos serem transpilados para validarmos se tudo está ok.
Então execute o comando abaixo para iniciar o Next.js

npm run dev -w web 

Quando o Next.js subir acesse http://localhost:3000/api e veja nosso valor da conta aparecendo.
Pronto iniciamos o Next.js e ele usará nosso componente.