Next.js + Supabase로 인증 기능이 있는 노트 앱 만들기

Next.js + Supabase로 인증 기능이 있는 노트 앱 만들기

목차

1. 프로젝트 설정
2. Supabase 설정
3. 환경 변수 설정
4. 인증 구현
5. 노트 기능 구현

프로젝트 설정

먼저 Supabase 템플릿을 사용하여 Next.js 프로젝트를 생성합니다:

npx create-next-app@latest -e with-supabase notes
cd notes
npm run dev

Supabase 설정

1. database.new에서 새 Supabase 프로젝트 생성
2. 프로젝트 설정:
   • 조직 이름 설정
   • 프로젝트 이름 설정
   • 데이터베이스 비밀번호 생성 및 저장
   • 지역 선택 (사용자와 가까운 위치)

환경 변수 설정

.env.local 파일 생성 및 설정:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

데이터베이스 테이블 생성

SQL 에디터에서 노트 테이블 생성:

create table notes (
  id serial primary key,
  title text,
  content text,
  created_at timestamp with time zone default now()
);

insert into notes (title, content)
values 
  ('첫 번째 노트', '노트 내용입니다'),
  ('두 번째 노트', '다른 노트 내용입니다'),
  ('세 번째 노트', '또 다른 노트 내용입니다');

노트 페이지 구현

// app/notes/page.tsx
import { createClient } from '@/utils/supabase/server';
import { redirect } from 'next/navigation';

export default async function NotesPage() {
  const supabase = await createClient();

  // 인증 확인
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) {
    redirect('/login');
  }

  // 노트 가져오기
  const { data: notes } = await supabase
    .from('notes')
    .select('*');

  return (
    <div>
      {notes?.map(note => (
        <div key={note.id}>
          <h2>{note.title}</h2>
          <p>{note.content}</p>
        </div>
      ))}
    </div>
  );
}

보안 설정

미들웨어 설정

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });
  await supabase.auth.getSession();
  return res;
}

인증 콜백 라우트

// app/auth/callback/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function GET(request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get('code');

  if (code) {
    const supabase = createRouteHandlerClient({ cookies });
    await supabase.auth.exchangeCodeForSession(code);
  }

  return NextResponse.redirect(requestUrl.origin);
}

주요 기능

1. 이메일 인증을 통한 사용자 등록/로그인
2. 보호된 노트 페이지
3. 실시간 데이터베이스 연동
4. 서버 사이드 렌더링

개발 환경에서의 이메일 설정

개발 중에는 Supabase 조직에 초대된 이메일만 인증 가능:

1. Supabase 대시보드 → 조직 설정
2. 팀원 초대
3. 초대된 이메일로만 테스트 가능

프로덕션 설정

실제 서비스를 위해서는:

1. 커스텀 SMTP 서버 설정
2. 환경 변수 업데이트
3. 보안 설정 검토

태그

#NextJS #Supabase #Authentication #Database #TypeScript #WebDevelopment #FullStack #ServerSideRendering

이 프로젝트는 Next.js와 Supabase를 사용하여 빠르게 인증 기능이 포함된 웹 애플리케이션을 구축하는 방법을 보여줍니다. 특히 무료로 사용할 수 있는 기능들을 최대한 활용하여 프로덕션 레벨의 애플리케이션을 구축할 수 있습니다.