Next js Boilerplate
v3.60.5
Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, Sqlite e mysql), monitoramento de erros com sentinela, log com pino.js e gerenciamento de logs, monitoramento como código, livro de histórias, múltiplas linguagens (i18n), seguro com arcjato (detecção de bot, limitação de taxa, proteção de ataque, etc.) e muito mais.
Clone este projeto e use -o para criar seu próprio projeto Next.js. Você pode conferir a demonstração ao vivo no Next.js Boilerplate, que inclui um sistema de autenticação em funcionamento.
 |  |   |
 |  | |
 |  | |
| Adicione seu logotipo aqui |
Demoção ao vivo: Next.js Boilerplate
| Inscrever-se | Entrar |
|---|---|
 | |
Experiência do desenvolvedor Primeiro, estrutura de código extremamente flexível e mantenha apenas o que você precisa:
@ prefixRecurso interno de Next.js:
Execute o seguinte comando em seu ambiente local:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installPara suas informações, todas as dependências são atualizadas todos os meses.
Em seguida, você pode executar o projeto localmente no modo de desenvolvimento com recarga ao vivo executando:
npm run devAbra http: // localhost: 3000 com seu navegador favorito para ver seu projeto.
Para começar, você precisará criar uma conta de funcionário no Clerk.com e criar um novo aplicativo no painel do funcionário. Depois de fazer isso, copie os valores NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY e CLERK_SECRET_KEY e adicione -os ao arquivo .env.local (não rastreado por git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keyAgora você tem um sistema de autenticação totalmente funcional com o Next.js, incluindo recursos como inscrição, login, saque, esqueceu a senha, a redefinição de senha, o perfil de atualização, a senha de atualização, a atualização de email, a conta exclua e muito mais.
O projeto usa o DRIZZLEORM, um ORM seguro de tipo que é compatível com bancos de dados PostgreSQL, SQLite e MySQL. Por padrão, o projeto é configurado para trabalhar perfeitamente com o PostgreSQL e você tem a flexibilidade de escolher qualquer provedor de banco de dados PostGresql de sua escolha.
Para tradução, o projeto usa next-intl combinado com Crowdin. Como desenvolvedor, você só precisa cuidar da versão em inglês (ou outro idioma padrão). As traduções para outros idiomas são geradas e tratadas automaticamente pelo Crowdin. Você pode usar o Crowdin para colaborar com sua equipe de tradução ou traduzir as mensagens com a ajuda da tradução da máquina.
Para configurar a tradução (i18n), crie uma conta no Crowdin.com e crie um novo projeto. No projeto recém -criado, você poderá encontrar o ID do projeto. Você também precisará criar um novo token de acesso pessoal indo para as configurações da conta> API. Em seguida, em suas ações do Github, você precisa definir as seguintes variáveis de ambiente: CROWDIN_PROJECT_ID e CROWDIN_PERSONAL_TOKEN .
Depois de definir as variáveis de ambiente em suas ações do GitHub, seus arquivos de localização serão sincronizados com o Crowdin toda vez que você for lançado um novo compromisso com a filial main .
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ ├── utils # Utilities folder
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Você pode configurar facilmente o próximo JS Boilerplate, pesquisando todo o projeto para FIXME: fazer personalizações rápidas. Aqui estão alguns dos arquivos mais importantes a personalizar:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png e public/favicon-32x32.png : seu site Faviconsrc/utils/AppConfig.ts : arquivo de configuraçãosrc/templates/BaseTemplate.tsx : tema padrãonext.config.mjs : Next.js Configuration.env : variáveis de ambiente padrãoVocê tem acesso total ao código -fonte para maior personalização. O código fornecido é apenas um exemplo para ajudá -lo a iniciar seu projeto. O céu é o limite.
Para modificar o esquema do banco de dados no projeto, você pode atualizar o arquivo de esquema localizado em ./src/models/Schema.ts . Este arquivo define a estrutura das tabelas de banco de dados usando a biblioteca ORM da garoa.
Depois de fazer alterações no esquema, gerar uma migração executando o seguinte comando:
npm run db:generateIsso criará um arquivo de migração que reflita as alterações do seu esquema. A migração é aplicada automaticamente durante a próxima interação do banco de dados; portanto, não há necessidade de executá -la manualmente ou reiniciar o próximo servidor.js.
O projeto segue a especificação convencional, o que significa que todas as mensagens de comprometimento devem ser formatadas de acordo. Para ajudá -lo a escrever mensagens de compromisso, o projeto usa o CommitELEN, uma CLI interativa que o guia através do processo de confirmação. Para usá -lo, execute o seguinte comando:
npm run commit Um dos benefícios do uso de compromissos convencionais é a capacidade de gerar automaticamente um arquivo CHANGELOG . Ele também nos permite determinar automaticamente o próximo número da versão com base nos tipos de começos incluídos em uma versão.
Todos os testes de unidade estão localizados ao lado do código -fonte no mesmo diretório, facilitando a localização. O projeto usa biblioteca de testes Vitest e React para testes de unidade. Você pode executar os testes com o seguinte comando:
npm run testO projeto usa dramaturgo para integração e teste de ponta a ponta (E2E). Você pode executar os testes com os seguintes comandos:
npx playwright install # Only for the first time in a new environment
npm run test:e2e No ambiente local, o teste visual está desativado e o terminal exibirá a mensagem [percy] Percy is not running, disabling snapshots. . Por padrão, o teste visual é executado apenas em ações do GitHub.
A pasta do roteador de aplicativos é compatível com o tempo de execução do Edge. Você pode habilitá -lo adicionando as seguintes linhas src/app/layouts.tsx :
export const runtime = 'edge' ; Para suas informações, a migração do banco de dados não é compatível com o tempo de execução do Edge. Portanto, você precisa desativar a migração automática em src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;Depois de desativá -lo, você deve executar a migração manualmente com:
npm run db:migrateVocê também precisa executar o comando sempre que deseja atualizar o esquema do banco de dados.
Durante o processo de construção, as migrações de banco de dados são executadas automaticamente, portanto, não há necessidade de executá -las manualmente. No entanto, você deve definir DATABASE_URL em suas variáveis de ambiente.
Em seguida, você pode gerar uma construção de produção com:
$ npm run buildEle gera uma criação de produção otimizada da caldeira. Para testar a compilação gerada, execute:
$ npm run start Você também precisa definir as variáveis de ambiente CLERK_SECRET_KEY usando sua própria chave.
Este comando inicia um servidor local usando a construção da produção. Agora você pode abrir http: // localhost: 3000 no seu navegador preferido para ver o resultado.
O projeto usa o Sentry para monitorar erros. No ambiente de desenvolvimento, nenhuma configuração adicional é necessária: o próximo.js Boilerplate é pré-configurado para usar sentinela e destaque (sentinela para desenvolvimento). Todos os erros serão enviados automaticamente à sua instância local de destaque, permitindo que você experimente a sentinela localmente.
Para o ambiente de produção, você precisará criar uma conta sentinela e um novo projeto. Em seguida, no next.config.mjs , você precisa atualizar os atributos de org e project na função withSentryConfig . Além disso, adicione seu Sentry DSN a sentry.client.config.ts , sentry.edge.config.ts e sentry.server.config.ts .
Next.js Boilerplate depende do Codecov para solução de relatórios de cobertura de código. Para ativar o CodeCov, crie uma conta CodeCov e conecte -a à sua conta do GitHub. Seus repositórios devem aparecer no seu painel CodeCov. Selecione o repositório desejado e copie o token. Nas ações do GitHub, defina a variável de ambiente CODECOV_TOKEN e cole o token.
Certifique -se de criar CODECOV_TOKEN como um GitHub Ações em segredo, não coloque -o diretamente no seu código -fonte.
O projeto usa pino.js para registro. No ambiente de desenvolvimento, os logs são exibidos no console por padrão.
Para a produção, o projeto já está integrado a melhor pilha para gerenciar e consultar seus logs usando o SQL. Para usar melhor pilha, você precisa criar uma conta de pilha melhor e criar uma nova fonte: vá para o seu melhor painel de logs da pilha> Fontes> Conecte a fonte. Em seguida, você precisa dar um nome à sua fonte e selecionar Node.js como a plataforma.
Depois de criar a fonte, você poderá visualizar e copiar seu token de origem. Em suas variáveis de ambiente, cole o token na variável LOGTAIL_SOURCE_TOKEN . Agora, todos os registros serão automaticamente enviados e ingeridos por melhor pilha.
O projeto usa verificação para garantir que seu ambiente de produção esteja sempre em funcionamento. Em intervalos regulares, verifique os testes que terminam com a extensão *.check.e2e.ts e notifica se algum dos testes falhar. Além disso, você tem a flexibilidade de executar testes de vários locais para garantir que seu aplicativo esteja disponível em todo o mundo.
Para usar o checkly, você deve primeiro criar uma conta no site deles. Depois de criar uma conta, gere uma nova chave da API no painel de checkly e defina a variável de ambiente CHECKLY_API_KEY nas ações do GitHub. Além disso, você precisará definir o CHECKLY_ACCOUNT_ID , que também pode ser encontrado no seu painel de verificação em Configurações do usuário> Geral.
Para concluir a configuração, atualize o arquivo checkly.config.ts com seu próprio endereço de e -mail e URL de produção.
O projeto usa o ArcJet, um produto de segurança como produto que inclui vários recursos que podem ser usados individualmente ou combinados para fornecer defesa em profundidade para o seu site.
Para configurar o ArcJet, crie uma conta gratuita e obtenha sua chave de API. Em seguida, adicione -o à variável de ambiente ARCJET_KEY .
O ArcJet está configurado com dois recursos principais: detecção de bot e o arcjet escudo waf:
O ArcJet está configurado com um cliente central no src/libs/Arcjet.ts que inclui as regras da WAF de escudo. Regras adicionais são configuradas no src/app/[locale]/layout.tsx com base no tipo de página.
O Boilerplate Next.js inclui um analisador embutido. Pode ser usado para analisar o tamanho dos pacotes JavaScript. Para começar, execute o seguinte comando:
npm run build-statsAo executar o comando, ele abrirá automaticamente uma nova janela do navegador com os resultados.
O projeto já está configurado com o Drizzle Studio para explorar o banco de dados. Você pode executar o seguinte comando para abrir o Database Studio:
npm run db:studioEm seguida, você pode abrir https://local.drizzzle.studio com seu navegador favorito para explorar seu banco de dados.
Se você é o usuário do VSCODE, poderá ter uma melhor integração com o VSCode, instalando a extensão sugerida em .vscode/extension.json . O código de partida vem com configurações para uma integração perfeita com o VSCode. A configuração de depuração também é fornecida para a experiência de depuração de front -end e back -end.
Com os plug -ins instalados no seu VSCode, o ESLint e o mais bonito podem corrigir automaticamente o código e exibir erros. O mesmo se aplica aos testes: você pode instalar a extensão VSCode Vitest para executar automaticamente seus testes e também mostra a cobertura do código no contexto.
Dicas Pro: Se você precisar de um projeto de verificação de tipo amplo com o TypeScript, poderá executar uma compilação com CMD + Shift + B no Mac.
Todos podem contribuir para este projeto. Sinta -se à vontade para abrir um problema se tiver alguma dúvida ou encontrar um bug. Totalmente aberto a sugestões e melhorias.
Licenciado sob a licença do MIT, Copyright © 2024
Consulte a licença para obter mais informações.
| | |
| | |
| | |
| Adicione seu logotipo aqui |
Feito com ♥ por Creativedesignsguru
Procurando um caldeira personalizada para iniciar seu projeto? Eu ficaria feliz em discutir como posso ajudá -lo a construir um. Sinta -se à vontade para entrar em contato qualquer momento em [email protected]!
