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で書かれたランディングページのテーマは、最初に開発者エクスペリエンスで作られています。

このプロジェクトをクローンし、それを使用して独自のnext.jsプロジェクトを作成します。次のJSテンプレートデモを確認できます。

スポンサー



ここにロゴを追加します

デモ

NextJSランディングページテンプレートスクリーンショット

ライブデモをご覧ください。

特徴

開発者エクスペリエンス最初：

静的サイトジェネレーターのnext.js
？ Tailwind CSSと統合します
？ Tailwind CSSを処理し、 styled-jsxに統合するためのPostCSS
？タイプチェックタイプスクリプト
typeTscriptおよびReact 18のStrict Mode 18
ESLINTを備えたリンダー（デフォルトのNextJS、NextJS Core Web Vitals、Airbnb構成）
？きれいなコードフォーマッタ
？ Gitフック用のハスキー
GIT段階的ファイルでリナーを実行するためのLintステージ
？ VSCODE構成：PostCSS、ESLINT、PRETTIER、TYPESCRIPTのデバッグ、設定、タスク、および拡張機能
？ SEOメタデータ、JSON-LD、および次のSEOを使用したオープングラフタグ
バンドラーアナライザー
？️Netlifyを使用して展開をワンクリックします（または、任意のホスティングサービスへの手動展開）
？無料のテーマを含めます
？灯台のスコアを最大化します

next.jsの組み込み機能：

html＆cssを削除します
？ライブリロード
bustingをキャッシュします

コンポーネントが含まれています

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

次に、ライブリロードで開発モードでローカルに実行できます。

 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 and public/favicon-32x32.png ：favicon、https://favicon.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アカウントにクローンし、deployにdeploylify：

vscode情報（オプション）

VSCODEユーザーの場合、 .vscode/extension.jsonに提案された拡張機能をインストールすることにより、VSCODEとの統合を改善できます。スターターコードには、VSCodeとのシームレスな統合の設定が表示されます。デバッグ構成は、フロントエンドとバックエンドのデバッグエクスペリエンス用にも提供されます。

プロのヒント：TypeScriptを使用してプロジェクトワイドタイプチェックが必要な場合は、MacでCMD + Shift + Bを使用してビルドを実行できます。