next15 filterlist

다음 .js 15 필터 목록

Tailwind CSS 및 Prisma와 함께 Next.js 15를 사용하여 필터링을 사용하여 대화식, 점진적으로 향상된 프로젝트 작업 관리자. 로딩 상태의 취급을 보여주기 위해 의도적으로 느려졌습니다.

Context API 버전은 filter-provider 브랜치를 참조하십시오.이 버전은 모든 필터를 단일 상태로 배치하여 여러 번의 토글을 전환 할 때 폐기되는 문제를 해결합니다.

NUQ를 사용하여 nuqs 지점을 참조하여 동일한 일을 수행하십시오. 도서관을 사용하는 것이 더 낫습니다.

이것은 다음.js 프로젝트 create-next-app 으로 부트 스트랩입니다.

이 프로젝트는 next/font 사용하여 사용자 정의 Google 글꼴 인 Inter를 자동으로 최적화하고로드합니다.

시작하기

먼저 종속성을 설치하십시오.

npm install

그런 다음 개발 서버를 실행합니다.

npm run dev

http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.

프리즘 설정

sqlite 사용한 Prisma 로컬 개발 또는 sqlserver 와 같은 실제 데이터베이스를 결정해야합니다. schema.prisma 파일에서 정의하십시오.

프로젝트의 루트에 .env 파일을 추가하고 env("DATABASE_URL") 와 함께 내부 schema.prisma 를 사용하는 것을 고려하십시오. .env.sample 을 참조하십시오.

전환 후 마이그레이션 명령을 실행하기 전에 prisma/migrations 폴더를 삭제하십시오.

SQLServer를 사용하는 경우 데이터베이스 스키마를 다음과 같이 마이그레이션해야합니다.

npm run prisma.migrate

sqlite를 사용할 때는 다음과 같이 초기화합니다.

npm run prisma.push

초기 데이터의 종자 prisma/seed.ts :

npm run prisma.seed

자세히 알아보십시오

JS에 대한 자세한 내용은 다음 리소스를 살펴보십시오.

• Next.js 문서 - Next.js 기능 및 API에 대해 알아보십시오.
• 다음.js- 대화식 Next.js 튜토리얼을 배우십시오.

JS Github 리포지토리를 확인할 수 있습니다. 귀하의 의견과 기부금을 환영합니다!

Vercel에 배포하십시오

Next.js 앱을 배포하는 가장 쉬운 방법은 Next.js의 제작자의 Vercel 플랫폼을 사용하는 것입니다.

자세한 내용은 Next.js 배포 문서를 확인하십시오.