https://github.com/gwjun/next-trpc-boilerplate

tRPC를 이용한 Next.js 보일러플레이트
https://github.com/gwjun/next-trpc-boilerplate

app-router-nextjs trpc

Last synced: about 1 month ago
JSON representation

tRPC를 이용한 Next.js 보일러플레이트

• Host: GitHub
• URL: https://github.com/gwjun/next-trpc-boilerplate
• Owner: GWjun
• Created: 2024-08-23T08:24:58.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T12:54:22.000Z (4 months ago)
• Last Synced: 2024-08-28T14:17:38.885Z (4 months ago)
• Topics: app-router-nextjs, trpc
• Language: TypeScript
• Homepage:
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
Next-tRPC boilerplate

  


    

    

    

    

  

  
tRPC를 이용한 Next.js(App router) 보일러플레이트



## 사용 방법

### 환경 변수 설정

루트 디렉터리에 `.env` 파일 생성 후 DB에 해당하는 정보 입력

```bash

DATABASE_URL="postgresql://johndoe:randompassword@localhost:6543/mydb?schema=public?pgbouncer=true"

DIRECT_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

```

### 클라이언트 컴포넌트

`react-query`를 이용하여 사용

```tsx

const usesQuery = trpc.test.getUsers.useQuery();

```

### 서버 컴포넌트

`caller`를 이용하여 사용

```tsx

const trpc = await createAsyncCaller();

const users = await trpc.test.getUsers();

```