Next JS Landing Page Starter Template

Next JS Landing Page Starter Template

AI Исходный код

1.0.0

Скачать

Шаблон целевой страницы, построенный со следующим JS 14+, Tailwind CSS 3 и TypeScript

Следующее знаменование стартера JS

Тема целевой страницы, написанная в следующем.js, Tailwind CSS и TypeScript ⚡ Сначала изготовлен с опытом разработчика: Next.js, TypeScript, Eslint, более красивые, хаски, полоса, VSCode, NetLify, PostCSS, Tailwind CSS.

Клонируйте этот проект и используйте его для создания собственного проекта Next.js. Вы можете проверить следующую демонстрацию шаблонов JS.

Спонсоры



Добавьте здесь свой логотип

Демо

Скриншот шаблона целевой страницы NextJS

Проверьте нашу живую демонстрацию.

Функции

Сначала опыт разработчика:

Next.js для статического генератора сайтов
? Интегрируйте с Tailwind CSS
? PostCSS для обработки Tailwind CSS и интегрированный в styled-jsx
? Тип проверки TypeScript
✅ строгий режим для TypeScript и React 18
✏ Linter с Eslint (по умолчанию NextJS, NextJS Core Web Vitals и конфигурация Airbnb)
? Форматер кода с красивым
? Хаски для git крючков
Lint-Listed для запуска Linters в GIT-поставленных файлах
? Конфигурация VSCODE: отладка, настройки, задачи и расширение для PostCSS, Eslint, более красивой, типовой
? Метаданные SEO, JSON-LD и открытые графические теги со следующим SEO
Анализатор Бундлера
️ развертывание одного клика с NetLify (или ручной развертывание в любые услуги хостинга)
? Включите бесплатную тему
? Максимизируйте оценку маяка

Встроенная функция от Next.js:

☕ Minify HTML & CSS
? Живая перезагрузка
✅ Кэш разорение

Включены компоненты

Навие
Герой
Функции
CTA Banner
Нижний колонтитул

Найдите больше компонентов в наших премиальных темах NextJS.

Философия

Минимальный код
SEO-дружелюбный
Готовый к производству

Требования

Node.js и npm

Начиная

Запустите следующую команду в вашей местной среде:

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

Затем вы можете работать локально в режиме разработки с Live Reload:

 npm run dev

Откройте http: // localhost: 3000 с вашим любимым браузером, чтобы увидеть ваш проект. Для вашей информации, следующий JS должен потратить некоторое время, чтобы собрать проект в первый раз.

 .
├── 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

Настройка

Вы можете легко настроить тему. Пожалуйста, измените следующий файл:

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png и public/favicon-32x32.png : ваш Favicon, вы можете создать с https://favicon.io/favicon-converter/
src/styles/global.css : ваш файл CSS с использованием Tailwind CSS
utils/AppConfig.ts : файл конфигурации
src/pages/index.tsx : индексная страница темы, которая использует Base компонент
src/template/Base.tsx : Base компонент с использованием компонентных блоков
src/templates/* : список блоков компонентов
src/* : Другие папки в SRC - это атомные компоненты, используемые блоками компонентов

Вот слой:

Точка входа: index.tsx в src/pages
Base шаблон: Base.tsx в src/templates
Используйте компонентные блоки от src/templates/*
Используйте атомные компоненты из src/*

Развернуть в производстве

Вы можете увидеть результаты локально в производственном режиме с:

 $ npm run build
$ npm run start

Сгенерированные файлы HTML и CSS являются минимизированными (встроенная функция от Next JS). Он также удалит неиспользованные CSS из Tailwind CSS.

Вы можете создать оптимизированную производственную сборку с:

 npm run build-prod

Теперь ваша тема готова к развертыванию. Все сгенерированные файлы расположены в папке out , которую вы можете развернуть с помощью любой службы хостинга.

Развернуть в NetLify

Клонировать этот репозиторий на собственной учетной записи GitHub и развернуть в NetLify:

Информация VSCODE (необязательно)

Если вы являетесь пользователями VSCODE, вы можете получить лучшую интеграцию с VSCODE, установив предложенное расширение в .vscode/extension.json . Стартовый код создает настройки для беспроблемной интеграции с VSCODE. Конфигурация отладки также предназначена для опыта отладки Frontend и Backend.

Профессиональные советы: если вам нужна проверка широкого типа проекта с помощью TypeScript, вы можете запустить сборку с CMD + Shift + B на Mac.