precedent - Next.jsプロジェクト用のコンポーネント、フック、ユーティリティの独断的なコレクション。

(An opinionated collection of components, hooks, and utilities for your Next.js project.)

Created at: 2023-01-13 22:27:05
Language: TypeScript
License: MIT
前例 – 次のプロジェクトのビルディングブロック

判例

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

スティーブンテイツイッターフォロワー数 前例リポジトリのスター数

イントロダクション ·ワンクリックデプロイ ·技術スタック + 機能 ·著者


紹介

Precedent は、Next.js プロジェクトのコンポーネント、フック、ユーティリティの意見のあるコレクションです。

ワンクリックデプロイ

このテンプレートは、以下のボタンを使用して Vercel にデプロイできます。

Vercel を使用したデプロイ

次のコマンドを使用して、このリポジトリをローカルで複製および作成することもできます。

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

技術スタック+機能

https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4

フレームワーク

  • 次へ.js – 最高の開発者エクスペリエンスを備えたパフォーマンスの高いアプリを構築するためのReactフレームワーク
  • 認証.js –グーグル、ツイッター、GitHubなどのプロバイダーでユーザー認証を簡単に処理します。
  • Prisma – ノード用のタイプスクリプトファーストORM.js

プラットフォーム

  • Vercel – git で変更を簡単にプレビュー&デプロイ
  • 鉄道 – PostgreSQLデータベースを簡単にプロビジョニング(ログイン不要)

UI

  • 追い風CSS – 迅速なUI開発のためのユーティリティファーストのCSSフレームワーク
  • 基数 –モーダル、ポップオーバーなどのプリミティブを使用して、優れたユーザーエクスペリエンスを構築します
  • フレーマーモーション –コンポーネントを簡単にアニメーション化するためのReact用のモーションライブラリ
  • Lucide – 美しくシンプルでピクセルパーフェクトなアイコン
  • @next/font – カスタムフォントを最適化し、外部ネットワーク要求を削除してパフォーマンスを向上させます
  • @vercel/og –エッジで動的なオープングラフ画像を生成します
  • react-wrap-balancer – タイトルを読みやすくするシンプルなReactコンポーネント

フックとユーティリティ

  • useIntersectionObserver
    –要素がビューポートに出入りするタイミングを観察するための反応フック
  • useLocalStorage
    –ブラウザのローカルストレージにデータを保持する
  • useScroll
    –スクロール位置を観察するための反応フック(例))
  • nFormatter
    –またはのような接尾辞が付いた数値のフォーマット
    1.2k
    1.2M
  • capitalize
    –文字列の最初の文字を大文字にします
  • truncate
    –文字列を指定された長さに切り捨てます
  • use-debounce – 関数呼び出し/状態更新のデバウンス

コード品質

  • TypeScript – エンドツーエンドのタイプセーフのための静的型チェッカー
  • よりきれい – 一貫したコードスタイルのための独断的なコードフォーマッタ
  • ESLint – Next.jsおよびTypeScript用のプラグ可能なリンター

  • Vercelアナリティクス –プライバシーに配慮した方法でユニークビジター、ページビューなどを追跡します

著者