Próximo JS Página Next JS Landing Page Starter Template Next JS Landing Page Starter Template

Next JS Landing Page Starter Template

Código-Fonte de IA

1.0.0

Baixar

Modelo de página de destino construído com o próximo JS 14+, Tailwind CSS 3 e TypeScript

Próximo JS Starter Banner

Tema da página de pouso escrito em Next.js, Tailwind CSS e TypeScript ⚡️ Feito com a experiência do desenvolvedor primeiro: Next.js, TypeScript, Eslint, mais bonito, Husky, Staged, Vscode, Netlify, PostCSS, Tailwind CSS.

Clone este projeto e use -o para criar seu próprio projeto Next.js. Você pode verificar a próxima demonstração de modelos JS.

Patrocinadores



Adicione seu logotipo aqui

Demonstração

Crega de modelo de página de destino do próximojs

Confira nossa demonstração ao vivo.

Características

Experiência do desenvolvedor primeiro:

Next.js para gerador de local estático
? Integrar -se com o Tailwind CSS
? POSTCSS para processamento de Tailwind CSS e integrado ao styled-jsx
? TIPO TIPO TIPO TIPO
✅ Modo rigoroso para TypeScript e React 18
✏️ Linter com ESLint (Padrão NextJs, NextJS Core Web Vitals e Airbnb Configuration)
? Formateira de código com mais bonito
? Husky para ganchos git
FIED-FAGED para executar linhentes em arquivos encenados do Git
? Configuração do VSCode: Debug, Configurações, Tarefas e Extensão para PostCSS, Eslint, mais bonito, TypeScript
? Seo Metadata, JSON-LD e Tags de gráficos abertos com o próximo SEO
Analisador de Bundler
? Susttle de um clique com a Netlify (ou implantação manual em qualquer serviço de hospedagem)
? Inclua um tema grátis
? Maximize a pontuação do farol

Recurso interno de Next.js:

☕ Minify HTML & CSS
? Recarregar ao vivo
✅ Busting de cache

Componentes incluídos

Navi
Herói
Características
Banner CTA
Rodapé

Encontre mais componentes em nossos temas premium do NextJS.

Filosofia

Código mínimo
Seo amigável
Pronto para a produção

Requisitos

Node.js e NPM

Começando

Execute o seguinte comando em seu ambiente local:

 git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
npm install

Em seguida, você pode executar localmente no modo de desenvolvimento com recarga ao vivo:

 npm run dev

Abra http: // localhost: 3000 com seu navegador favorito para ver seu projeto. Para suas informações, o próximo JS precisa levar algum tempo para compilar o projeto pela primeira vez.

 .
├── README.md            # README file
├── next.config.js       # Next JS configuration
├── public               # Public folder
│   └── assets
│       └── images       # Image used by default template
├── src
│   ├── background       # Atomic background component
│   ├── button           # Atomic button component
│   ├── cta              # Atomic cta component
│   ├── feature          # Atomic feature component
│   ├── footer           # Atomic footer component
│   ├── hero             # Atomic hero component
│   ├── layout           # Atomic layout component
│   ├── navigation       # Atomic navigation component
│   ├── pages            # Next JS pages
│   ├── styles           # PostCSS style folder with Tailwind
│   ├── templates        # Default template
│   └── utils            # Utility folder
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Personalização

Você pode configurar facilmente o tema. Altere o seguinte arquivo:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png e public/favicon-32x32.png : seu favicon, você pode genatar em https://favicon.io/favicon-converter/
src/styles/global.css : seu arquivo CSS usando o Tailwind CSS
utils/AppConfig.ts : arquivo de configuração
src/pages/index.tsx : a página de índice do tema que usa o componente Base
src/template/Base.tsx : o componente Base usando blocos de componentes
src/templates/* : a lista de blocos de componentes
src/* : outras pastas no SRC são os componentes atômicos usados por blocos de componentes

Aqui está a camada:

O ponto de entrada: index.tsx em src/pages
O modelo Base : Base.tsx em src/templates
Use blocos de componentes de src/templates/*
Use componentes atômicos de src/*

Implantar para a produção

Você pode ver os resultados localmente no modo de produção com:

 $ npm run build
$ npm run start

Os arquivos HTML e CSS gerados são minificados (recurso interno do próximo JS). Ele também removerá o CSS não utilizado do Tailwind CSS.

Você pode criar uma construção de produção otimizada com:

 npm run build-prod

Agora, seu tema está pronto para ser implantado. Todos os arquivos gerados estão localizados na pasta out , que você pode implantar com qualquer serviço de hospedagem.

Implantar para netlify

Clone este repositório em conta própria do GitHub e implante para netlify:

Informações do vscode (opcional)

Se você for usuários 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.

Dicas Pro: Se você precisar de um tipo de projeto de projeto de projeto com o TypeScript, poderá executar uma compilação com CMD + Shift + B no Mac.