Next JS Landing Page Starter Template Next JS Landing Page Starter Template

Next JS Landing Page Starter Template

AI 소스 코드

1.0.0

다운로드

다음 JS 14+, Tailwind CSS 3 및 TypeScript로 구축 된 방문 페이지 템플릿

다음 JS 스타터 배너

랜딩 페이지 테마 Next.js, Tailwind CSS 및 TypeScript로 작성된 invelyer Experience로 만든 Tailwind CSS 및 TypeScript hated : next.js, typescript, eslint, pretier, husky, lint-staged, vscode, netlify, postcss, tailwind css.

이 프로젝트를 복제하고이를 사용하여 다음 Next.js 프로젝트를 만듭니다. 다음 JS 템플릿 데모를 확인할 수 있습니다.

스폰서



여기에 로고를 추가하십시오

데모

Nextjs 방문 페이지 템플릿 스크린 샷

라이브 데모를 확인하십시오.

특징

개발자 경험 먼저 :

정적 사이트 생성기의 경우 다음
? Tailwind CSS와 통합
? Tailwind CSS 처리를위한 Postcs 및 styled-jsx 에 통합되었습니다
? 유형 확인 typescrip
typeScript 및 반응 18의 엄격한 모드
Eslint가있는 ✏️ Linter (기본 Nextjs, Nextjs Core Web Vitals 및 Airbnb 구성)
? 더 예쁘고 코드 포맷터
? git 후크를위한 허스키
Git Steaged Files에서 Linters를 실행하기위한 Lint-Stage
? VSCODE 구성 : Postcs, Eslint, Pretier, TypeScript의 디버그, 설정, 작업 및 확장
? SEO 메타 데이터, JSON-LD 및 다음 SEO가있는 오픈 그래프 태그
번들러 분석기
? ️ netlify를 통한 원 클릭 배포 (또는 호스팅 서비스에 대한 수동 배포)
? 무료 테마를 포함하십시오
? 등대 점수를 최대화합니다

Next.js의 내장 기능 :

html & css를 최소화하십시오
? 라이브 리로드
cache 캐시 파열

구성 요소가 포함되어 있습니다

NAVBAR
영웅
특징
CTA 배너
보행인

프리미엄 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 : https.io/favicon-converter/에서 생성 할 수 있습니다.
src/styles/global.css : Tailwind CSS를 사용한 CSS 파일
utils/AppConfig.ts : 구성 파일
src/pages/index.tsx : Base 구성 요소를 사용하는 테마의 인덱스 페이지
src/template/Base.tsx : 구성 요소 블록을 사용하는 Base 구성 요소
src/templates/* : 구성 요소 블록 목록
src/* : SRC의 다른 폴더는 구성 요소 블록에서 사용하는 원자 구성 요소입니다.

다음은 레이어입니다.

진입 점 : src/pages 의 index.tsx
Base 템플릿 : src/templates 의 Base.tsx
src/templates/*
src/* 의 원자 구성 요소 사용

생산에 배치

생산 모드에서 결과를 다음과 같이 볼 수 있습니다.

 $ npm run build
$ npm run start

생성 된 HTML 및 CSS 파일은 (Next JS에서 내장 기능) 미니싱됩니다. 또한 Tailwind CSS에서 사용하지 않은 CSS를 제거합니다.

다음과 같이 최적화 된 생산 빌드를 만들 수 있습니다.

 npm run build-prod

이제 테마가 배치 될 준비가되었습니다. 생성 된 모든 파일은 out 폴더에 있으며 호스팅 서비스와 함께 배포 할 수 있습니다.

NetLify에 배포하십시오

이 저장소를 자체 GitHub 계정으로 복제하고 NetLify에 배포하십시오.

VSCODE 정보 (선택 사항)

VSCODE 사용자 인 경우 .vscode/extension.json 에 제안 된 확장자를 설치하여 VSCODE와 더 나은 통합을 가질 수 있습니다. 스타터 코드에는 VSCODE와 완벽한 통합을위한 설정이 제공됩니다. 디버그 구성은 프론트 엔드 및 백엔드 디버깅 경험에도 제공됩니다.

Pro Tips : TypeScript가있는 프로젝트 와이드 유형 확인이 필요한 경우 Mac에서 CMD + Shift + B 로 빌드를 실행할 수 있습니다.