typescript nextjs starter Download - typescript nextjs starter Código do código do starter Download

typescript nextjs starter

Código-Fonte de IA

2.2.0

Baixar

Next.js TypeScript Starter

Iniciante digno não opinado para o próximo.js

Fundação altamente escalável com o melhor DX. Todas as ferramentas necessárias para criar seu próximo projeto.

_{Criado por João Pedro com a ajuda de muitos colaboradores maravilhosos.}

Características

⚡️ Next.js 15 (roteador de aplicativos)
⚛️ React 19
⛑ TypeScript
? Eslint 9 - Para encontrar e corrigir problemas em seu código
? Mais bonito - formatador de código para estilo consistente
? Husky - para executar scripts antes de cometer
? COMMITLINT - Para garantir que suas mensagens de confirmação siga a convenção
? Renovar - para manter suas dependências atualizadas
FIED-FAGED-Execute Eslint e mais bonito contra arquivos Git encenados
? Fluxo de trabalho de relações públicas - Executar verificação do tipo
EditorConfig - Estilos de codificação consistentes em editores e IDEs
? Mapeamento de caminho - Importar componentes ou imagens usando o @ prefixo
? CSP - Política de segurança de conteúdo para segurança aprimorada (política mínima padrão)
? T3 Env-Variáveis de ambiente seguras de tipo
? Redirecionos - Adicione facilmente redirecionamentos ao seu aplicativo

Início rápido

A melhor maneira de começar com este modelo é usar o Create Next App.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

Desenvolvimento

Para iniciar o projeto localmente, execute:

pnpm dev

Abra http://localhost:3000 com seu navegador para ver o resultado.

Depoimentos

“Este motor de partida é de longe o melhor iniciante digno de texto para Next.js.
- Arafat Zahan

"Eu realmente posso recomendar o repo inicial do próximo.js.js como uma base sólida para seus projetos futuros Next.js".
- Corfitz

"Trabalho brilhante!"
- Soham Dasgupta

Showcase

Lista de sites que começaram com o Next.JS TypeScript Starter:

Freeinvoice.dev
Noção de fabricante de avatar
IKEA Baixo preço
hygraph.com
RocketSeat.com.br
vagaschapeco.com
UNK.VERCEL.APP
Cryptools.dev
Adicione o seu

Documentação

Requisitos

Node.js> = 20
PNPM 9

Estrutura de diretório

.github - Configuração do GitHub, incluindo o fluxo de trabalho do IC.
.husky - Configuração e ganchos Husky.
public - ativos estáticos como robots.txt, imagens e favicon.
src - Código -fonte do aplicativo, incluindo páginas, componentes, estilos.

Scripts

pnpm dev - inicia o aplicativo no modo de desenvolvimento em http://localhost:3000 .
pnpm build - cria uma construção de produção otimizada do seu aplicativo.
pnpm start - inicia o aplicativo no modo de produção.
pnpm type-check -Valide o código usando o TypeScript Compiler.
pnpm lint - executa ESLint para todos os arquivos no diretório src .
pnpm lint:fix - Executa o ESLINT FIX para todos os arquivos no diretório src .
pnpm format - executa mais bonito para todos os arquivos no diretório src .
pnpm format:check - Verifique a lista mais bonita de arquivos que precisam ser formatados.
pnpm format:ci - Verifique mais o CI.

Mapeamento do caminho

O TypeScript é pré-configurado com mapeamentos de caminho personalizados. Para importar componentes ou arquivos, use o @ prefix.

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

Mudar para YARN/NPM

Este iniciador usa o PNPM por padrão, mas essa escolha é sua. Se você quiser alternar para o YARN/NPM, exclua o arquivo pnpm-lock.yaml , instale as dependências com YARN/NPM, altere o fluxo de trabalho do IC e os ganchos Husky Git para usar comandos de YARN/NPM.

NOTA: Se você usar o fio, siga estas etapas da documentação Husky para que os ganchos Git não fracassem com o fio no Windows.

Variáveis de ambiente

Usamos o T3 ENV para gerenciar variáveis de ambiente. Crie um arquivo .env.local na raiz do projeto e adicione suas variáveis de ambiente lá.

Ao adicionar variáveis de ambiente adicionais, o esquema em ./src/lib/env/client.ts ou ./src/lib/env/server.ts deve ser atualizado de acordo.

Redireciona

Para adicionar redirecionamentos, atualize a matriz redirects em ./redirects.ts . É digitado, para que você obtenha preenchimento automático para as propriedades.

CSP (Política de Segurança de Conteúdo)

A Política de Segurança do Conteúdo (CSP) é uma camada de segurança que ajuda a detectar e mitigar certos tipos de ataques, incluindo scripts cruzados (XSS) e ataques de injeção de dados. O CSP é implementado no arquivo next.config.ts .

Ele contém uma política padrão e mínima que você pode personalizar para atender às necessidades do seu aplicativo. É uma base para se basear.