Next.js Hub: Integrating AI and Blob Storage Features

세바스찬 초퍼가 AI와 블롭 스토리지를 Next.js 애플리케이션에 손쉽게 통합하는 방법을 시연합니다.

### Next.js 애플리케이션에 AI 및 Blob 스토리지 통합
* 👋 안녕하세요, 저는 Sebastian Choper입니다. 이 동영상에서는 **Next.js Hub를 활용하여 애플리케이션에 AI 및 블롭 스토리지 기능**을 통합하는 방법을 보여드리겠습니다.
* 🔧 먼저 **Next.js Hub 코어 모듈**을 추가하여 AI 및 블롭 기능을 활성화하고, **POST 요청을 통해 API 상호 작용을 위한 이미지 선택**을 허용하도록 메인 컴포넌트를 설정했습니다.
* 🌐 AI를 통합하기 위해 **'npx next 허브 링크'를 실행**하여 프로젝트를 Cloudflare 계정과 연결하고 ATTI 데모 팀과 연결하여 **유럽에서 EMG AI 프로젝트**를 만들었습니다.
* 📊 Workers Free를 사용하여 Cloudflare 계정 연결을 확인한 후, **프로젝트가 생성되었지만 아직 배포되지 않았다는 메시지**가 표시되어 에지에 배포하기 전에 마무리하라는 메시지가 표시되었습니다.
* ⚙ 저는 .run 명령을 사용하여 **최대 토큰 제한이 100인 숫자 배열 형식으로 업로드된 이미지를 설명하는 프롬프트**가 표시되는 LLM 모델을 실행했습니다.
* 🖼 또한 쉽게 검색하고 대체 텍스트를 준비할 수 있도록 설명에 대한 사용자 지정 메타데이터를 포함하여 **허브 블롭 도트 풋을 사용하여 업로드한 이미지를 버킷에 저장**했습니다.
* 🚀 프로젝트를 배포하기 위해 **`npx knub deploy` 명령**을 실행하여 프로덕션용 프로젝트를 빌드하고 내 Cloudflare 페이지 계정에 배포하여 필요한 경로를 자동으로 생성했습니다.
* 🏞 마지막으로, 산의 이미지를 업로드하고 설명을 검색하는 데 성공한 프로덕션 배포를 보여드리면서 **Next.js 애플리케이션에서 AI와 블롭 스토리지의 원활한 통합**을 시연했습니다.

Add AI & File upload to your Nuxt application

NuxtLabs

AI 및 블롭 스토리지용 Next.js Hub 사용 소개.

이미지를 수신하고 설명을 반환하도록 API 엔드포인트를 설정합니다.

Next.js Hub 프로젝트와 Cloudflare 계정 연결.

Cloudflare에서 프로젝트 생성 및 확인.

LLM 모델을 호출하여 이미지를 설명합니다.

메타데이터와 함께 블롭 스토리지에 이미지 저장하기.

이미지 업로드 및 AI 설명 생성을 테스트합니다.

로컬 데이터 디렉토리 및 배포 프로세스.

배포된 애플리케이션을 테스트하고 결과를 확인합니다.

블롭 저장소의 이미지 및 설명을 확인합니다.