nextjs postgres nextauth tailwindcss template

다음 .js 14 관리자 대시 보드 템플릿

JS 앱 라우터로 구축되었습니다

데모 · 클론 및 배포

개요

다음 스택을 사용하는 스타터 템플릿입니다.

• 프레임 워크 - Next.js (앱 라우터)
• 언어 - 타입 스크립트
• Auth -Auth.js
• 데이터베이스 - 포스트 그레
• 배포 - 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
);

그런 다음 무수 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에서 응용 프로그램에 액세스 할 수 있어야합니다.