# Next.js로 현대 SaaS 애플리케이션 구축하기 Next.js는 강력한 React 프레임워크로, 현대 웹 애플리케이션을 더 쉽고 효율적으로 구축할 수 있게 해줍니다. 이 글에서는 Next.js를 사용하여 간단한 SaaS 애플리케이션을 구축하는 방법을 단계별로 안내합니다. 개발 환경 설정부터 기본 기능 생성까지의 전체 과정을 다룰 것입니다. ## 1. 환경 준비 시작하기 전에 개발 환경이 준비되어 있는지 확인해야 합니다. 다음 단계를 따르세요: ### 1.1 Node.js 및 npm 설치 컴퓨터에 Node.js와 npm이 설치되어 있는지 확인하세요. 터미널에서 다음 명령어를 실행하여 버전을 확인할 수 있습니다: ```bash node -v npm -v ``` 아직 설치하지 않았다면 [Node.js 공식 웹사이트](https://nodejs.org/)에서 다운로드하여 설치하세요. ### 1.2 Next.js 프로젝트 생성 터미널에서 다음 명령어를 실행하여 새로운 Next.js 프로젝트를 생성하세요: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` 이 명령어는 `my-saas-app`이라는 이름의 새 프로젝트를 생성하고 필요한 종속성을 자동으로 설치합니다. ## 2. 프로젝트 구조 `my-saas-app` 디렉토리 아래에서 다음과 같은 기본 구조를 볼 수 있습니다: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: 애플리케이션의 페이지를 저장합니다. - **public/**: 이미지, 아이콘 등과 같은 공용 리소스를 저장합니다. - **styles/**: CSS 파일을 저장합니다. ## 3. 핵심 기능 구축 이 섹션에서는 간단한 사용자 등록 및 로그인 시스템을 구현합니다. ### 3.1 데이터베이스 설정 이 예제에서는 Supabase를 백엔드 서비스로 사용합니다. 다음 단계를 따르세요: 1. [Supabase 공식 웹사이트](https://supabase.io/)에 가서 계정을 만드세요. 2. 새 프로젝트를 생성하고 데이터베이스 URL 및 API 키를 기록하세요. 3. 데이터베이스에 연결하여 다음과 같은 사용자 테이블을 생성하세요: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Supabase 클라이언트 설치 Next.js 프로젝트에 Supabase 클라이언트 라이브러리를 설치하세요: ```bash npm install @supabase/supabase-js ``` ### 3.3 사용자 등록 페이지 생성 `pages/` 디렉토리 아래에 새로운 파일 `register.js`를 생성하고 다음 내용을 추가하세요: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Register = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleRegister = async () => { const { user, error } = await supabase.auth.signUp({ email, password, }); if (error) { console.error(error); } else { alert('등록 성공!'); } }; return ( ); }; export default Register; ``` ### 3.4 사용자 로그인 페이지 생성 마찬가지로 `pages/` 디렉토리 아래에 새로운 파일 `login.js`를 생성하고 다음 내용을 추가하세요: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email, password, }); if (error) { console.error(error); } else { alert('로그인 성공!'); } }; return ( ); }; export default Login; ``` ## 4. 애플리케이션 배포 ### 4.1 배포 플랫폼 선택 우리는 Vercel을 사용하여 Next.js 애플리케이션을 배포합니다. 다음 단계를 따르세요: 1. [Vercel 공식 웹사이트](https://vercel.com/)에 가서 계정을 등록하세요. 2. 새 프로젝트를 생성하고 GitHub 저장소를 선택하세요. 3. 환경 변수에 Supabase URL 및 API 키를 추가하세요. 4. 배포를 클릭하고 Vercel이 배포를 완료할 때까지 기다리세요. ### 4.2 배포 확인 배포가 완료되면 공개 URL을 받게 됩니다. 이 URL에 접속하여 애플리케이션이 정상적으로 작동하는지 확인하세요. ## 5. 요약 이 글의 단계를 통해 Next.js를 사용하여 사용자 등록 및 로그인 기능이 포함된 간단한 SaaS 애플리케이션을 성공적으로 구축했습니다. Next.js의 강력함은 유연성과 효율성에 있으며, 더 복잡한 요구 사항을 충족하기 위해 쉽게 확장할 수 있습니다. 이 기초 위에서 더 많은 놀라운 애플리케이션을 구축하기를 바랍니다!