next15 filterlist

next.js 15フィルターリスト

Tailwind CSSとPrismaを使用して、next.js 15を使用したフィルタリングを備えたインタラクティブで徐々に強化されたプロジェクトタスクマネージャー。荷重状態の取り扱いを紹介するために、意図的に遅くなりました。

コンテキストAPIバージョンについては、すべてのフィルターを単一の状態にバッチするfilter-providerブランチを参照して、複数を切り替えるときに破棄される問題を修正します。

同じことを達成するためにNUQSを使用したバージョンについては、 nuqsブランチを参照してください。おそらくライブラリを使用する方が良いでしょうか？

これはcreate-next-appでBootstrappedのnext.jsプロジェクトです。

このプロジェクトではnext/fontを使用して、カスタムGoogleフォントであるInterを自動的に最適化およびロードします。

はじめる

まず、依存関係をインストールします。

npm install

次に、開発サーバーを実行します。

npm run dev

http：// localhost：3000を開き、ブラウザを使用して結果を確認します。

プリスマセットアップ

sqliteを使用したPrisma Local Developmentと、たとえばsqlserverを使用した実際のデータベースを決定する必要があります。 schema.prismaファイルで定義します。

プロジェクトのルートに.envファイルを追加し、 env("DATABASE_URL")でこれらの内部schema.prismaを使用することを検討して、 .env.sampleを参照してください。

切り替え後、[移行]コマンドを実行する前に、 prisma/migrationsフォルダーを削除します。

SQLServerを使用する場合、データベーススキーマを次のように移行する必要があります。

npm run prisma.migrate

sqliteを使用する場合、以下を初期化します

npm run prisma.push

Seed Prisma/Seed.ts初期データ：

npm run prisma.seed

もっと詳しく知る

next.jsの詳細については、次のリソースをご覧ください。

• next.jsドキュメント - next.js機能とAPIについて学びます。
• next.jsを学ぶ - インタラクティブなnext.jsチュートリアル。

next.js githubリポジトリを確認できます - フィードバックと貢献を大歓迎です！

Vercelに展開します

next.jsアプリを展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。

詳細については、next.js deploymentドキュメントをご覧ください。