Next JS Landing Page Starter Template Descargar - Next JS Landing Page Starter Template Fuente Código de descarga Descargar

Next JS Landing Page Starter Template

Código Fuente de IA

1.0.0

Descargar

Plantilla de página de destino construida con Next JS 14+, Tailwind CSS 3 y TypeScript

Siguiente Banner de inicio de JS

Tema de la página de destino escrito en Next.js, Tailwind CSS y TypeScript ⚡️ Hecho con experiencia en desarrollador primero: Next.js, TypeScript, Eslint, más bonito, ronco, escenario, vScode, Netlify, PostCSS, Tailwind CSS.

Clone este proyecto y úselo para crear su propio proyecto Next.js. Puede consultar una próxima demostración de plantillas JS.

Patrocinadores



Agregue su logotipo aquí

MANIFESTACIÓN

Captura de pantalla de la plantilla de página de destino NextJS

Mira nuestra demostración en vivo.

Características

Experiencia del desarrollador primero:

Next.js para el generador de sitios estáticos
? Integrar con CSS de Vail
? PostCSS para procesar CSS de viento de cola e integrado a styled-jsx
? Escriba la corriente de compra de TypeScript
✅ Modo estricto para TypeScript y Reaccion 18
✏️ Linter con Eslint (NextJS predeterminado, NextJS Core Web Vitals y Configuración de Airbnb)
? Formatero de código con más bonito
? Husky para gits gits
Lint-escense para ejecutar los revestimientos en archivos escenificados Git
? Configuración de VScode: depuración, configuración, tareas y extensión para postcss, eslint, más bonitos, mecanografiados
? Metadatos de SEO, JSON-LD y etiquetas de gráficos abiertos con el próximo SEO
Analizador de bundler
? ️ Implementación de un clic con NetLify (o implementación manual en cualquier servicio de alojamiento)
? Incluir un tema gratis
? Maximizar la puntuación del faro

Característica incorporada de Next.js:

☕ Minificar HTML y CSS
? Recargar en vivo
✅ Busto al caché

Componentes incluidos

Barra de navegación
Héroe
Características
Banner de CTA
Pie de página

Encuentre más componentes en nuestros temas premium de NextJS.

Filosofía

Código mínimo
De SEO
Preparado para la producción

Requisitos

Node.js y npm

Empezando

Ejecute el siguiente comando en su entorno 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

Luego, puede ejecutar localmente en modo de desarrollo con la recarga en vivo:

 npm run dev

Abra http: // localhost: 3000 con su navegador favorito para ver su proyecto. Para su información, el próximo JS debe tomarse un tiempo para compilar el proyecto por primera 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

Personalización

Puede configurar fácilmente el tema. Cambie el siguiente archivo:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png y public/favicon-32x32.png : su favicon, puede generar desde https://favicon.io/favicon-converter/
src/styles/global.css : su archivo CSS usando CSS Tailwind
utils/AppConfig.ts : archivo de configuración
src/pages/index.tsx : la página de índice del tema que usa el componente Base
src/template/Base.tsx : el componente Base usando bloques de componentes
src/templates/* : la lista de bloques de componentes
src/* : Otras carpetas en SRC son los componentes atómicos utilizados por los bloques de componentes

Aquí está la capa:

El punto de entrada: index.tsx en src/pages
La plantilla Base : Base.tsx en src/templates
Use bloques de componentes de src/templates/*
Use componentes atómicos de src/*

Desplegar a la producción

Puede ver los resultados localmente en modo de producción con:

 $ npm run build
$ npm run start

Los archivos HTML y CSS generados están minificados (función incorporada de la siguiente JS). También eliminará CSS no utilizado de CSS de viento de cola.

Puede crear una construcción de producción optimizada con:

 npm run build-prod

Ahora, su tema está listo para ser implementado. Todos los archivos generados están ubicados en la carpeta out , que puede implementar con cualquier servicio de alojamiento.

Implementar para netlify

Clonar este repositorio en la cuenta de GitHub e implementar para netlify:

Información de VSCODE (opcional)

Si es usuarios de VSCode, puede tener una mejor integración con VScode instalando la extensión sugerida en .vscode/extension.json . El código de inicio presenta la configuración para una integración perfecta con VScode. La configuración de depuración también se proporciona para la experiencia de depuración frontend y backend.

Consejos PRO: si necesita una verificación de tipo de tipo de proyecto con TypeScript, puede ejecutar una compilación con CMD + Shift + B en Mac.