@packrd/nextjs-domains

v1.0.35

Published

2 months ago

Framework para gerenciar múltiplos domínios em projetos Next.js com estrutura automática de pastas e páginas.

0High
0Medium
0Low

packrd

nextjs framework domains multi-domain packrd nextjs-plugin front-end module plugin

🧩 @packrd/nextjs-domains

Multi-domain framework para projetos Next.js

Imagine administrar vários projetos front-end diferentes, cada um em uma conta separada da Vercel, com seus próprios domínios e configurações no GitHub. Agora imagine fazer tudo isso dentro de um único projeto Next.js.

Com este micro-framework, você organiza múltiplos sites — cada um com seu próprio domínio — dentro da mesma base de código. Basta separar cada aplicação em pastas específicas (por domínio) e o framework cuida do restante: roteamento, carregamento de componentes, metadados e a estrutura necessária para cada site funcionar de forma independente.

O resultado?

Um único repositório,
Uma única conta na Vercel,
Vários domínios, cada um servindo sua própria aplicação.

Perfeito para projetos multi-domínio como: example.com, example-2.com, example-3.com — todos mantidos e versionados no mesmo lugar, com máxima organização e zero dor de cabeça.

Para executar o projeto localmente utilizando um domínio específico, basta definir o ambiente de desenvolvimento local no arquivo .env.local:

PMD_TEST_DOMAIN=example.com

🚀 Instalação

npm install @packrd/nextjs-domains

yarn add @packrd/nextjs-domains

⚙️ Inicialização

Após instalar será gerado automaticamente a estrutura base do PMD (Project Multi Domain), adicionando um exemplo de domínio no seu projeto:

Isso criará a seguinte estrutura no seu projeto:

src/
└── nextjs-domains/
    ├── main.js
    └── example.com/
        ├── index.js
        ├── metadata.js
        └── pages/
            └── home.js

Cada domínio terá:

metadata.js → Metadados e SEO do domínio
pages/ → Páginas específicas do domínio
components/ → Componentes do domínio
index.js → Arquivo principal que exporta as rotas e metadados

Importante:

O arquivo main.js, localizado na pasta /nextjs-domains, não deve ser excluído. Todos os domínios devem ser atribuídos a ele. A seguir, apresentamos um exemplo de uso:

🧩 Configuração do domínio

No arquivo src/nextjs-domains/main.js você define quais domínios estão ativos:

import ExampleCom from "@/pmd/domains/example.com";
import Example2Com from "@/pmd/domains/example2.com";

export default {
  "example.com": ExampleCom,
  "example-2.com": Example2Com,
};

No seu projeto Next.js, nos arquivos onde normalmente seriam criadas as páginas renderizadas, basta importar e utilizar o módulo NextJsDomain dentro de um Server Component.

Por exemplo, na rota app/page.js:

src/
└── app/
    └── page.js

import NextJsDomain from "@packrd/nextjs-domains";

export default async function Page(props) {
  return await NextDomain({ ...props, pageName: "home" });
}

Isso fará com que o framework:

Detecte automaticamente o domínio (example.com, example-2.com, etc.)
Retorne o componente correto com os props e searchParams necessários

Utilize o módulo NextJsDomain na rota app/layout.js:

src/
└── app/
    └── layout.js

import NextJsDomain from "@packrd/nextjs-domains";

export async function generateMetadata() {
  const domain = await NextJsDomain();
  return domain.pmd[domain?.host]?.metadata;
}

export default async function RootLayout({ children }) {
  const domain = await NextJsDomain();
  const footer = domain.pmd[domain?.host]?.components?.footer;
  const header = domain.pmd[domain?.host]?.components?.header;

  return (
    <html lang="en">
      <body>
        {header ? <header>{header}</header> : ""}
        {children}
        {footer ? <footer>{footer}</footer> : ""}
      </body>
    </html>
  );
}

Isso fará com que o framework:

Carregue a página e metadados correspondentes
Detecte automaticamente o domínio (example.com, example-2.com, etc.)

🪄 Personalização

Você pode criar novos domínios duplicando a pasta example.com:

src/
└── nextjs-domains/
    ├── main.js
    └── example.com/
        ├── index.js
        ├── metadata.js
        └── pages/
            └── home.js
    └── example-2.com/
        ├── index.js
        ├── metadata.js
        └── pages/
            └── home.js
    └── example-3.com/
        ├── index.js
        ├── metadata.js
        └── pages/
            └── home.js

E editar o metadata.js de cada domínio, por exemplo:

export default {
  title: {
    template: "%s | Meu Domínio",
    default: "Página inicial - Meu Domínio",
  },
  description: "Projeto multi-domínio com Next.js",
};

⚠️ Requisitos

Node.js >=18
Next.js >=14
React >=18

💡 Dica

Se estiver em ambiente de desenvolvimento local, defina no .env.local:

PMD_TEST_DOMAIN=example.com

Assim, o domínio localhost será tratado como example.com, example-2.com, example-3.com ou com o nome do domínio do seu projeto para simular o ambiente real no modo de desenvolvimento.

📦 Scripts disponíveis

| Comando | Descrição | | ------------- | ---------------------------------------------------------------------------- | | npm run dev | Inicie seu projeto Next.js normalmente (o módulo se integra automaticamente) |

🛠️ Desenvolvimento

Para contribuir com o projeto:

git clone https://github.com/packrd/nextjs-domains.git
cd nextjs-domains
npm install
npm link

Depois, no seu projeto Next.js:

npm link @packrd/nextjs-domains

Isso permite testar localmente o módulo durante o desenvolvimento.

📜 Licença

MIT License
Desenvolvido por Rodrigo V Buttura • @packrd