precedent

先例

次のプロジェクトのビルディングブロック

はじめに・ワンクリック展開・TechStack +機能・著者

導入

先例は、次の.JSプロジェクトのコンポーネント、フック、ユーティリティの意見のコレクションです。

ワンクリック展開

このテンプレートを展開して、下のボタンを使用して次のことです。

また、次のコマンドを使用して、このリポジトリをローカルにクローンして作成することもできます。

npx create-next-app precedent --example " https://github.com/steven-tey/precedent "

次に、選択したパッケージマネージャーに依存関係をインストールします。

npm i
yarn
pnpm i

Tech Stack +機能

Perferent-demo.mp4

フレームワーク

• next.js - 最高の開発者エクスペリエンスを備えたパフォーマンスアプリを構築するためのReactフレームワーク
• 店員 - 美しく設計されたドロップイン反応コンポーネントを備えた包括的なユーザー管理プラットフォーム

プラットフォーム

• Vercel - Gitで変更を簡単にプレビューおよび展開します

ui

• Tailwind CSS - 迅速なUI開発のためのユーティリティファーストCSSフレームワーク
• 基数 - モーダル、ポップオーバーなどのプリミティブ。ユーザーエクスペリエンスを構築する
• フレーマーモーション - アニメーションコンポーネントに簡単に反応するためのモーションライブラリ
• Lucide - 美しくシンプルで、ピクセルに最適なアイコン
• next/font - カスタムフォントを最適化し、パフォーマンスを改善するために外部ネットワークリクエストを削除する
• ImageResponse - エッジで動的なオープングラフ画像を生成する

フックとユーティリティ

• useIntersectionObserver - 反応フックは、要素がビューポートに入るか出発するときに観察するために対応します
• useLocalStorage - ブラウザのローカルストレージにデータを保持します
• useScroll反応フックはスクロール位置を観察します（例）
• nFormatter - 1.2kや1.2Mなどの接尾辞を備えたフォーマット番号
• capitalize - 文字列の最初の文字を大文字にします
• truncate - 文字列を指定された長さに切り捨てます
• use-debounce - 関数呼び出し /状態の更新を撤回します

コード品質

• タイプスクリプト - エンドツーエンドタイプフェティ用の静的タイプチェッカー
• きれい - 一貫したコードスタイルのための意見のコードフォーマッタ
• ESLINT - next.jsおよびtypeScript用のプラグ可能なリナー

その他

• Vercel Analytics - ユニークな訪問者、PageViewsなどをプライバシーに優しい方法で追跡する

著者

• スティーブン・テイ（@Steventey）