t3 app router edge drizzle

T3 앱 라우터 (Edge)

Edge 런타임에 환상적인 T3 스택을 사용하려는 실험적 시도는 Next.js의 베타 앱 라우터를 사용합니다.

이것은 해킹과 학습의 장소입니다. 우리는 여전히 Next.js의 새로운 앱 라우터를 사용하여 앱을 구성하는 방법을 배우고 있으며 토론에서 의견을 환영합니다.

오류가 발생하면 (귀하는) 버그를 수정하고 함께 배울 수 있도록 문제를 만들어주십시오.

이것은 생산을위한 것이 아닙니다. 프로덕션 준비가 완료된 풀 스택 애플리케이션의 경우 훨씬 더 안정적인 Create-T3-App을 사용하십시오.

이 프로젝트는 Create-T3-App과 제휴하지 않습니다.

특징

이 프로젝트는 많은 똑똑한 사람들의 작품과 아이디어의 복사를 나타냅니다. 작업 프로토 타입에서 모두 함께 보는 것이 유용하다고 생각합니다.

• 모든 페이지와 경로의 에지 런타임.
• Drizzle-Orm을 사용한 SQL 및 스키마 관리 유형.
  • Create-T3-App은 Prisma를 사용하지만 Prisma는 Edge 런타임에서 실행할 수 없습니다.
• TRPC를 사용한 유형 안전 API.
  • 앱 라우터 설정이 여기에서 복사되었습니다.
  • 설치된 TRPC 버전은 현재 ./src/trpc/@trpc 의 실험 앱 라우터 TRPC 클라이언트에 고정되어 있으며, 이는 TRPC의 이후 버전에서 변경된 특정 방식으로 React-Query 쿼리 키를 형식화합니다. TRPC를 업그레이드하면 수화가 작동이 중단됩니다.
• auth.js와의 소유 인증
  • Create-T3-App은 Edge 런타임을 지원하지 않는 NextAuth를 사용합니다. 이 프로젝트는 Nextauth의 후속 인 Auth.js를 사용합니다. Auth.js는 Next.js에 대한 지원을 구축하지 않았으므로 SolidStart 구현이 복사되고 약간 수정되었습니다.
• 꼬리 바람이있는 스타일링.
  • 그것은 단지 CSS이므로 앱 라우터에서 잘 작동합니다.
• Shadcn/UI에서 구성 요소 및 레이아웃을 반응합니다
  • 그들은 또한 CSS와 Radix에 불과하므로 앱 라우터에서 잘 작동합니다.

데이터 가져 오기

서버 구성 요소 + TRPC + React Query가 우리에게 제공하는 몇 가지 옵션이 있습니다. 이러한 도구의 유연성을 통해 동일한 프로젝트에서 다른 사례에 대해 다른 전략을 사용할 수 있습니다.

1. 서버에서 데이터를 가져와 서버에서 렌더링하거나 클라이언트 구성 요소로 전달하십시오. 예.
2. 서버에서 데이터를 가져 와서 클라이언트에서 React-Query의 캐시를 수화시키는 데 사용합니다. 예 : 서버의 페치 및 탈수 데이터를 사용한 다음 클라이언트의 서버에서 캐시 된 데이터를 사용하십시오.
3. 클라이언트에 대한 데이터를 가져옵니다.
4. 서버 데이터를 가져 오지만 서스펜스 경계를 사용하여 첫 바이트 및 스트림 서버 구성 요소를 클라이언트에 차단하지 마십시오. TODO : 예.

시작하기

1. 일부 명령을 실행하십시오.

   pnpm i
   cp .env.example .env

2. .env를 채우십시오.

3. 스키마 변경을 새로운 PlanetScale 데이터베이스로 푸시하십시오. 관심있는 기존 데이터베이스 에서이 명령을 사용하지 마십시오. 파괴적입니다 (그리고 베타).

   pnpm db:push

4. 다음으로 시작하십시오 .JS DEV 서버.

   pnpm dev