nextjs postgres nextauth tailwindcss template

next.js 14管理ダッシュボードテンプレート

next.jsアプリルーターで構築されています

デモ・クローンと展開

概要

これは、次のスタックを使用したスターターテンプレートです。

• フレームワーク-NEXT.JS（アプリルーター）
• 言語 - タイプスクリプト
• Auth -auth.js
• データベース - Postgres
• 展開-Vercel
• スタイリング - 追い風css
• コンポーネント-ShadCn UI
• 分析 - Vercel Analytics
• フォーマット - きれい

このテンプレートは、新しいnext.jsアプリルーターを使用します。これには、レイアウトの強化、コンポーネントのコロケーション、テスト、スタイル、コンポーネントレベルのデータフェッチなどのサポートが含まれます。

はじめる

展開中、Vercelは新しいPostgresデータベースを作成するように求められます。これにより、必要な環境変数がプロジェクトに追加されます。

Vercel Postgresダッシュボード内で、このリポジトリで定義されているスキーマに基づいてテーブルを作成します。

 CREATE TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  image_url TEXT NOT NULL,
  name TEXT NOT NULL,
  status status NOT NULL,
  price NUMERIC(10, 2) NOT NULL,
  stock INTEGER NOT NULL,
  available_at TIMESTAMP NOT NULL
);

次に、uncomment app/api/seed.tsとhttp://localhost:3000/api/seedをヒットして、データベースを製品でシードします。

次に、 .env.exampleファイルを.envにコピーして値を更新します。 .env.exampleファイルの指示に従って、github oauthアプリケーションをセットアップします。

npm i -g vercel
vercel link
vercel env pull

最後に、次のコマンドを実行して、開発サーバーを開始します。

 pnpm install
pnpm dev

これで、http：// localhost：3000でアプリケーションにアクセスできるようになりました。