Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
DevHunt는 개발자 도구를 위한 오픈 소스 협업 런칭 플랫폼입니다. 본 가이드는 Next.js와 Supabase를 활용하여 프로젝트 환경을 구축하는 방법을 상세히 안내합니다. 환경 변수 설정 및 psql 명령어를 이용한 데이터베이스 복원 과정을 통해 실제 개발 워크플로우를 익힐 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub AI Tools의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기개발자가 만든, 개발 도구를 위한 오픈 소스 협업 런칭 플랫폼입니다. DevHunt.org에서 참여하여 여러분의 혁신적인 아이디어를 선보이고 웹 전반에 걸쳐 개발자 도구에 힘을 실어주세요!
프로젝트 루트 디렉터리에 .env.local 파일을 생성하고 다음 환경 변수들로 채워 넣으세요:
NEXT_PUBLIC_SUPABASE_URL=https://tusrbkspwpvucxzqhrgo.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR1c3Jia3Nwd3B2dWN4enFocmdvIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTYyNzI2OTUsImV4cCI6MjAxMTg0ODY5NX0.-HdjMYlbwVMggJiQ4cFxpr-AmNH1ueXBEgqxMPDlSJY
패키지 설치
npm install
# 또는
yarn install
...
개발 서버 실행
npm run dev
브라우저에서 http://localhost:3000을 열면 됩니다. 완료!
이 프로젝트는 create-next-app으로 부트스트랩된 Next.js 프로젝트입니다.
Project Settings -> Database Settings -> Connection InfoHost 값(예: db.<ReferenceID>.supabase.co)을 복사합니다.덤프를 복원하려면 다음 명령어를 실행하세요:
psql -h db.<ReferenceID>.supabase.co -U postgres -d postgres < /supabase/dump.sql
데이터베이스 비밀번호를 입력하라는 메시지가 표시됩니다. 이 비밀번호는 Project Settings -> Database Settings -> Database Password에서 찾을 수 있습니다. 또는 프로젝트 생성 시 저장했던 비밀번호를 사용하세요.
.env.local 설정 구성 (Set Up .env.local Configuration)프로젝트 루트 디렉터리에 .env.local 파일을 생성하고 다음 환경 변수들로 채워 넣으세요:
NEXT_PUBLIC_SUPABASE_URL=<Your_Project_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Your_Anonymous_Key>
SUPABASE_SERVICE_ROLE_KEY=<Your_Service_Role_Key>
키 값은 다음에서 찾을 수 있습니다:
<Your_Project_URL> - 프로젝트 설정(Project Settings) -> API -> 프로젝트 URL(Project URL)로 이동하여 URL을 복사합니다.<Your_Anonymous_Key> - 프로젝트 설정(Project Settings) -> API -> 프로젝트 API 키(Project API keys)로 이동하여 anon public 키를 찾습니다.<Your_Service_Role_Key> - 프로젝트 설정(Project Settings) -> API -> 프로젝트 API 키(Project API keys) 아래에서 service_role secret 키를 찾습니다.소셜 로그인 기능을 활성화하려면, 각 플랫폼별로 아래 가이드를 따르세요:
이 가이드들은 OAuth 기반의 소셜 로그인을 활성화하는 데 필요한 구성을 안내할 것입니다.
먼저 개발 서버를 실행합니다:
npm run dev
# 또는
yarn dev
...
브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.
app/page.tsx 파일을 수정하여 페이지 편집을 시작할 수 있습니다. 파일이 수정됨에 따라 페이지가 자동으로 업데이트됩니다.
이 프로젝트는 next/font를 사용하여 Inter라는 사용자 지정 Google Font를 자동으로 최적화하고 로드합니다.
Next.js 앱을 배포하는 가장 쉬운 방법은 Next.js 개발사에서 제공하는 Vercel Platform을 사용하는 것입니다.
더 자세한 내용은 저희 Next.js 배포 문서를 확인하세요.
DEVHUNT에 기여하는 데 관심이 있으신가요? 풀 리퀘스트(pull request)를 제출하기 전에 저희 개발 프로세스를 알아보기 위해 기여 가이드를 읽어주세요.
원본 프로젝트를 명확하게 언급하는 한, 자유롭게 이를 포크(fork)하고 클론(clone)할 수 있습니다. 만약 GitHub를 사용하는 경우, https://github.com/MarsX-dev/devhunt 를 참조해야 하며, 웹사이트의 경우 눈에 띄는 로고와 링크가 있는 devhunt.org를 참조해야 합니다.