집 >웹 프론트엔드 >JS 튜토리얼 >Next.js, Vercel AI 및 Tolgee를 사용하여 Kanban 보드 구축

Next.js, Vercel AI 및 Tolgee를 사용하여 Kanban 보드 구축

Patricia Arquette원래의: 2024-11-17 22:17:02627검색

TL;DR

이 기사에서는 데이터베이스 지원, Vercel AI SDK를 통한 AI 지원 및 Tolgee를 통한 현지화를 통해 WebSocket을 사용하여 Next.js에서 실시간 Kanban 보드를 구축할 것입니다.

배울 내용: ✨

Express 없이 Next.js에서 WebSocket 서버를 설정하세요.
NextAuth를 사용하여 Next.js에서 자격 증명 기반 인증을 구현하세요.
Docker 또는 클라우드 제공업체를 사용하여 PostgreSQL 데이터베이스를 구성하세요.
Vercel AI SDK에 작업 설명에 대한 AI 지원을 통합합니다.
Tolgee를 사용하여 실시간 번역 및 현지화를 추가하세요.

Tolgee 저장소에 별표 표시 ⭐

AI 및 현지화 지원을 통해 독특한 Kanban 보드를 구축할 준비가 되셨나요? ?

Building a Kanban Board with Next.js,Vercel AI and Tolgee

프로젝트 설정 ?️

Next.js 애플리케이션 초기화

다음 명령을 사용하여 새 Next.js 애플리케이션을 초기화합니다.

ℹ️ 원하는 패키지 관리자를 사용할 수 있습니다. 이번 프로젝트에서는 npm을 사용하겠습니다.

npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm

다음으로 새로 생성된 Next.js 프로젝트로 이동하세요.

cd kanban-ai-realtime-localization

종속성 설치

몇 가지 종속성이 필요합니다. 프로젝트에 필요한 모든 종속성을 설치하려면 다음 명령을 실행하세요.

npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd

UI 구성요소 설정

UI 구성 요소의 경우 shadcn/ui를 사용합니다. 다음 명령을 사용하여 기본 설정으로 초기화하세요.

npx shadcn@latest init -d

이제 나중에 애플리케이션에서 사용할 UI 구성 요소를 추가해 보겠습니다. shadcn/ui에서 재사용 가능한 구성 요소를 추가하려면 다음 명령을 실행하세요.

npx shadcn@latest add button card input label select textarea toast

app/comComponents/ui 디렉토리 내에는 이러한 구성 요소에 대한 몇 가지 추가 파일이 추가되며, 이는 애플리케이션용 UI를 구축할 때 사용할 것입니다.

데이터베이스 모델 설정?

프리즈마 초기화 중

다음 명령을 사용하여 Prisma를 초기화하세요.

npx prisma init

이 명령을 실행한 후에는 프로젝트 루트의 prisma 디렉터리에 새 Schema.prisma 파일이 생성되어야 합니다.

Prisma 스키마 정의

PostgreSQL을 데이터베이스로 사용하고 사용자 및 작업 모델을 포함하도록 새로 생성된 Schema.prisma 파일을 수정하세요.

// ? prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: <https://pris.ly/cli/accelerate-init>

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id       String @id @default(cuid())
  email    String @unique
  password String

  tasks Task[] @relation("UserTasks")

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Task {
  id          String  @id @default(cuid())
  title       String
  description String?
  userId      String

  column Int
  order  Int

  createdBy User @relation("UserTasks", fields: [userId], references: [id])

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

모델은 간단합니다. 각 사용자는 여러 작업을 가질 수 있으며 각 작업은 특정 사용자에게 연결됩니다. 작업에는 해당 상태(0은 진행 중, 1은 보류 중, 2는 완료)를 나타내는 정수 열 값이 있습니다. 순서 값은 할당된 열 내에서 각 작업의 위치를 결정합니다.

이제 모델이 준비되었으므로 이를 데이터베이스에 푸시해야 합니다. 이를 위해서는 연결 URL이 필요합니다.

이미 Neon이나 다른 서비스를 통해 데이터베이스에 액세스할 수 있다면 좋습니다. .env 파일을 연결 URL로 채웁니다. docker를 사용하여 로컬로 데이터베이스를 설정할 필요가 없습니다.

Docker를 사용하여 로컬로 데이터베이스를 설정하시겠습니까?

따라서 Docker를 사용하여 로컬 PostgreSQL 데이터베이스로 프로젝트를 시도하려면 이 연결 문자열 값이 포함된 DATABASE_URL이라는 새 변수를 .env 파일에 추가하세요.

npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm

데이터베이스를 로컬에서 실행하려면 Docker가 설치되어 있는지 확인하세요. 프로젝트 루트에 scripts라는 새 디렉터리를 만들고 다음 코드 줄을 사용하여 start-local-db-docker.sh라는 파일을 추가합니다.

cd kanban-ai-realtime-localization

이 스크립트는 기본적으로 DATABASE_URL 변수에 대한 .env 파일을 읽고 사용자 이름, 비밀번호, 데이터베이스 이름과 같은 모든 관련 데이터를 추출하고 존재하지 않는 경우 컨테이너를 만듭니다. 이미 실행 중인 경우 기존 컨테이너를 회전시키기만 하면 됩니다.

이 스크립트를 실행하여 애플리케이션의 모든 사용자 데이터를 호스팅할 PostgreSQL 컨테이너를 생성하고 실행합니다.

npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd

이제 PostgreSQL이 포함된 컨테이너가 실행 중이어야 합니다. 다음 명령을 실행하여 해당 여부를 확인할 수 있습니다.

npx shadcn@latest init -d

이제 데이터베이스와 상호 작용하기 위해 Prisma 클라이언트를 인스턴스화하는 방법이 필요합니다.

src/db 디렉터리에 index.ts라는 새 파일을 만들고 다음 코드 줄을 추가하세요.

npx shadcn@latest add button card input label select textarea toast

우리는 애플리케이션 전체에서 하나의 인스턴스만 생성 및 재사용되도록 PrismaClient의 싱글톤 인스턴스를 설정했습니다. 이는 특히 개발 모드에서 유용합니다.

이제 내보낸 상수 DB를 사용하여 애플리케이션의 데이터베이스와 상호 작용할 수 있습니다.

다음 명령을 실행하여 스키마 변경 사항을 데이터베이스에 푸시하세요.

npx prisma init

이제 업데이트된 유형이 IDE에서 작동하도록 하려면 다음 명령을 실행하여 업데이트된 스키마를 기반으로 새 유형을 생성하세요.

// ? prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: <https://pris.ly/cli/accelerate-init>

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id       String @id @default(cuid())
  email    String @unique
  password String

  tasks Task[] @relation("UserTasks")

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Task {
  id          String  @id @default(cuid())
  title       String
  description String?
  userId      String

  column Int
  order  Int

  createdBy User @relation("UserTasks", fields: [userId], references: [id])

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

이것이 애플리케이션 데이터베이스를 설정하는 데 필요한 전부입니다. ?

현지화를 위한 Tolgee 설정 ?️

Tolgee를 사용하여 Next.js 애플리케이션에서 현지화를 활성화하려면 다음 단계를 따르세요.

언어.ts 생성

이 파일은 언어 감지 및 쿠키 관리를 처리합니다.

// ? .env

# If you are using local DB with docker
DATABASE_URL=postgresql://postgres:password@localhost:5432/kanban-board

setLanguage 기능은 선택한 언어(로케일)를 1년 동안 만료되는 쿠키로 저장하여 앱이 세션 전반에 걸쳐 사용자의 언어 기본 설정을 기억할 수 있도록 합니다.

getLanguage 함수는 쿠키에 저장된 언어를 확인합니다. 유효한 언어가 발견되면 이를 반환합니다. 그렇지 않으면 브라우저에서 실행 중인 경우 브라우저 헤더에서 언어를 감지하려고 시도합니다. 감지에 실패하거나 환경이 브라우저가 아닌 경우 기본값은 DEFAULT_LANGUAGE입니다.

shared.ts 만들기

이 파일에는 번역을 위한 정적 데이터 가져오기를 포함하여 현지화 처리를 위한 공유 상수와 함수가 포함되어 있습니다

npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm

getStaticData 함수는 현지화된 콘텐츠를 미리 가져오기 위해 특정 언어 및 네임스페이스에 대한 번역을 로드하는 역할을 합니다. 메시지 디렉터리에서 언어 및 네임스페이스별로 JSON 파일을 가져온 다음 모든 것을 단일 객체로 묶어 반환합니다.

애플리케이션의 언어 선택을 위해 사용자에게 네 가지 언어 선택(영어, 체코어, 프랑스어, 독일어)을 제공합니다. 원하는 경우 다른 언어에 대한 지원을 추가할 수 있습니다.

프로젝트 루트에 있는 메시지 디렉토리에는 다양한 단어와 문장에 대한 다양한 정적 데이터가 저장됩니다.

ℹ️ 내 저장소에서 이러한 정적 번역 파일에 대한 링크를 찾을 수 있습니다. 그 파일에는 다른 언어로 번역된 문장들이 잔뜩 들어있어서 설명할 것이 없습니다.

TolgeeBase 기능은 번역 처리를 위한 도구로 Tolgee를 설정합니다. ICU 메시지 형식화(FormatIcu)에 대한 지원을 추가하고 디버깅을 위한 DevTools를 포함합니다. 이 함수는 환경 변수의 API 키와 URL을 사용하고 영어(en)를 대체 언어로 설정합니다.

환경 변수 업데이트

우리는 두 가지 다른 env 변수를 사용하고 있으며 이러한 API 키로 .env 파일을 채웁니다. Tolgee에 계정을 등록하고 TOLGEE_API_KEYS에 액세스하세요. 하지만 이 애플리케이션의 경우 해당 API 키가 필요하지 않습니다.

cd kanban-ai-realtime-localization

server.ts 생성

이 파일은 서버 측 렌더링을 위해 Tolgee 인스턴스를 구성하고 번역 처리를 설정합니다.

npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd

이 코드는 서버측 번역 처리를 위한 Tolgee 인스턴스를 생성합니다. 먼저 사용자가 선호하는 언어를 검색하는 getLanguage 함수를 사용하도록 getLocale을 설정합니다. 그런 다음 createTolgee에서 getStaticData를 통해 지원되는 모든 언어에 대한 번역 데이터로 Tolgee를 초기화합니다.

또한 제공된 언어(getLanguage에서)를 사용하도록 Tolgee를 설정하고 revalidate: 0을 설정하여 번역 요청 캐싱을 방지함으로써 항상 새로운 데이터를 로드하도록 사용자 정의 가져오기 기능을 구성합니다.

client.ts 생성

클라이언트측 렌더링을 위한 Tolgee 공급자를 설정합니다.

npx shadcn@latest init -d

이 코드는 번역을 위한 클라이언트측 Tolgee 공급자를 설정합니다. TolgeeProviderClient는 언어, staticData 및 하위 항목을 props로 사용하고 지정된 언어 및 데이터로 Tolgee를 초기화합니다. useEffect 내부에서는 PermanentChange로 언어 변경을 수신하고, 언어가 업데이트될 때마다 router.refresh()를 통해 페이지를 새로 고칩니다.

마지막으로 TolgeeProvider는 ssr 옵션을 사용하여 번역을 미리 로드하고 번역이 즉시 준비되지 않은 경우 "로드 중..."을 표시하여 하위 항목을 렌더링합니다.

layout.tsx에서 TolgeeProviderClient로 애플리케이션 래핑

마지막으로 모든 번역에 액세스할 수 있도록 보장하는 구성 요소입니다.

npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm

여기서 먼저 헤더나 함수에서 설정한 쿠키를 기반으로 사용자의 로케일에 액세스합니다. 그런 다음 해당 로케일을 태그.

Next.js 애플리케이션에서 Tolgee를 설정하는 데 필요한 전부입니다. ✨이것은 모든 Next.js 애플리케이션에서 Tolgee를 사용하여 위치를 구현하기 위해 수행해야 하는 표준 프로세스가 될 것입니다.

인증 설정 ?️

우리는 애플리케이션에서 인증을 위해 NextAuth를 사용할 것입니다. 먼저, 사용자가 전달한 데이터의 유효성을 검사하는 데 사용할 새로운 Zod 스키마를 정의하는 것부터 시작하겠습니다.

검증을 위한 Zod 스키마

로그인 및 등록 중에 이메일 및 비밀번호에 대한 사용자 입력을 검증하기 위해 Zod 스키마(AuthSchema)를 정의합니다. 이렇게 하면 이메일 형식이 정확하고 비밀번호가 지정된 길이 요구 사항을 충족하는지 확인할 수 있습니다.

cd kanban-ai-realtime-localization

이메일 필드는 다른 문자열이 아닌 정확한 이메일이어야 하며, 비밀번호 필드는 최소 8자, 최대 20자여야 합니다. 우리는 로그인/등록 양식에서 사용자가 전달한 데이터를 검증하여 기준을 충족하는지 확인하기 위해 여러 위치에서 이 검증 스키마를 사용할 것입니다.

다음인증 구성

인증을 위해 CredentialsProvider를 사용하여 src/app/api/auth/[...nextauth] 아래의 Route.ts에서 NextAuth를 설정합니다. 승인 기능은 자격 증명의 유효성을 검사하고, 사용자의 존재를 확인하고, 비밀번호를 확인합니다.

npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd

인증 함수 로직은 사용자 로그인 여부를 담당합니다. 이 설정의 기능은 제공된 이메일 및 비밀번호가 데이터베이스의 기존 사용자와 일치하는지 확인합니다.

Credential 기반 인증만을 사용하고 있습니다. 먼저 필드 유효성 검사를 위해 AuthSchema를 사용하여 자격 증명의 유효성을 검사합니다. 유효성 검사가 성공하면 데이터베이스에서 이메일로 사용자를 조회합니다. 사용자가 발견되면 데이터베이스의 해시된 비밀번호와 입력된 비밀번호를 비교합니다. 두 검사를 모두 통과하면 사용자 데이터(비밀번호 제외)가 반환됩니다.

짐작할 수 있듯이 여기서는 .env 파일 내에 NEXTAUTH_SECRET 변수를 정의해야 합니다. .env 파일을 다음 두 변수로 채웁니다.

npx shadcn@latest init -d

사용자 등록 API

src/app/api/auth/register/route.ts에서 비밀번호를 해시하고 데이터베이스에 사용자 데이터를 저장하는 사용자 등록용 엔드포인트를 생성합니다. 그런 다음 검증 성공에 따라 적절한 응답을 반환합니다.

npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm

여기에서는 클라이언트로부터 받은 데이터를 구문 분석하고 앞서 작성한 AuthSchema로 유효성을 검사합니다. 그런 다음 회전 값이 12인 해시를 생성합니다. 이는 데이터베이스에 저장할 암호화된 텍스트를 생성하고 마지막으로 사용자를 반환합니다.

이제 애플리케이션을 더욱 견고하게 만들기 위해 사용자가 특정 경로를 방문할 때마다 userSession을 확인하고 인증되지 않으면 해당 경로를 방문할 수 없도록 하는 미들웨어를 추가해 보겠습니다.

경로 보호를 위한 미들웨어

인증되지 않은 사용자의 /kanban 경로에 대한 액세스를 제한하기 위해 미들웨어를 추가합니다.

cd kanban-ai-realtime-localization

여기서는 사용자가 인증되지 않은 경우 "/kanban" 경로를 방문할 수 없어야 한다는 의미입니다.

인증 처리를 위한 백엔드 로직이 완료되었습니다. 몇 가지 클라이언트측 로직을 작업해 보겠습니다.

Navbar 구성요소 빌드

Navbar 구성 요소도 몇 가지 작은 구성 요소로 구성될 예정입니다. 로그인, 등록, 로그아웃 버튼과 사용자가 언어를 전환할 수 있는 선택 태그가 있습니다.

이러한 구성 요소 작업을 시작하겠습니다!

LangSelector 구성 요소

src/app/comComponents 디렉토리 내에 다음 코드 줄을 사용하여 새 파일 lang-selector.tsx를 만듭니다.

npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd

구성요소는 설명이 매우 명확해야 합니다. 우리는