How to Build a Basic CRUD App with Next.js?

소개 이 가이드에서는 next js를 프론트엔드로 사용하고 back4app을 백엔드 솔루션으로 사용하여 완전한 crud(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 과정을 안내합니다 " basic crud app nextjs "라는 이름의 프로젝트를 설정하고, 동적 데이터베이스 스키마를 설계하며, next js 애플리케이션에 강력한 crud 기능을 통합할 것입니다 back4app 프로젝트 구성 및 컬렉션 설계부터 시작하여 parse sdk 또는 rest/graphql 방법을 사용하여 next js 인터페이스를 연결하는 모든 내용을 다룰 것입니다 마지막에는 안전한 사용자 인증과 효율적인 데이터 관리를 갖춘 프로덕션 준비 완료 웹 애플리케이션을 갖게 될 것입니다 주요 내용 next js와 back4app으로 완전한 crud 애플리케이션을 구축하세요 데이터 요구에 맞춘 유연한 백엔드 스키마 설계를 배우세요 데이터 관리를 위한 직관적인 드래그 앤 드롭 관리자 인터페이스를 활용하세요 docker 컨테이너화 및 github 통합을 포함한 배포 모범 사례를 발견하세요 전제 조건 시작하기 전에 다음을 확인하세요 새 프로젝트가 설정된 back4app 계정입니다 안내를 보려면 https //www back4app com/docs/get started/new parse app 를 참조하세요 next js 개발 환경입니다 https //nextjs org/docs/api reference/create next app 또는 유사한 도구를 사용하세요 node js(버전 14 이상)가 설치되어 있는지 확인하세요 javascript, next js 및 api 통합에 대한 기본 이해입니다 필요한 경우 https //nextjs org/docs 를 방문하여 개요를 확인하세요 1단계 – 프로젝트 설정 새 back4app 프로젝트 시작하기 back4app 계정에 로그인하세요 대시보드에서 “새 앱” 버튼을 클릭하세요 프로젝트 이름을 입력하세요 basic crud app nextjs 및 프롬프트를 따르세요 새 프로젝트 만들기 새 프로젝트가 대시보드에 나타나며, 백엔드의 핵심 역할을 합니다 next js 애플리케이션 만들기 터미널을 열고 다음을 실행하세요 npx create next app\@latest basic crud app nextjs 프로젝트 디렉토리로 변경하세요 cd basic crud app nextjs 이 명령은 사용자 정의를 위한 next js 프로젝트 프레임워크를 설정합니다 2단계 – 데이터베이스 스키마 만들기 데이터 모델 구조화하기 이 crud 앱을 위해 필수 컬렉션을 생성할 것입니다 아래는 핵심 기능을 가능하게 하는 필드 세부 정보가 포함된 두 개의 주요 컬렉션입니다 1 아이템 컬렉션 이 컬렉션은 각 항목에 대한 세부 정보를 저장합니다 필드 데이터 유형 설명 id 객체 id 자동 생성된 고유 식별자 제목 문자열 항목의 이름 또는 제목 설명 문자열 항목에 대한 간략한 요약 생성일 날짜 항목이 생성된 타임스탬프 업데이트됨 날짜 최신 업데이트의 타임스탬프 2 사용자 수집 이 컬렉션은 사용자 프로필 및 인증 데이터를 처리합니다 필드 데이터 유형 설명 id 객체 id 자동 생성된 고유 식별자 사용자 이름 문자열 사용자를 위한 고유한 사용자 이름 이메일 문자열 고유한 이메일 주소 비밀번호 해시 문자열 사용자 인증을 위한 안전하게 해시된 비밀번호 생성일 날짜 계정이 생성된 시간 업데이트됨 날짜 마지막 계정 업데이트의 타임스탬프 이러한 컬렉션은 back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 생성하고 관련 열을 추가하여 수동으로 정의할 수 있습니다 새 클래스 만들기 적절한 데이터 유형을 선택하고, 열 이름을 지정하고, 기본값 또는 요구 사항을 설정하여 필드를 만듭니다 열 만들기 스키마 설정을 위한 back4app ai 어시스턴트 사용하기 back4app ai 어시스턴트는 데이터베이스 스키마 생성을 간소화합니다 원하는 컬렉션과 필드를 설명하고 어시스턴트가 구조를 자동 생성하도록 하세요 ai 어시스턴트 사용 단계 ai 어시스턴트 열기 back4app 대시보드 메뉴에서 찾으세요 데이터 모델 설명하기 컬렉션과 필드 요구 사항을 설명하는 자세한 프롬프트를 붙여넣으세요 검토 및 적용 생성된 스키마를 확인하고 프로젝트에 적용하세요 샘플 프롬프트 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 이 방법은 시간을 절약할 뿐만 아니라 스키마가 일관되고 최적화되도록 보장합니다 3단계 – 관리자 인터페이스 및 crud 기능 활성화 관리자 인터페이스 탐색 back4app 관리자 인터페이스는 백엔드 데이터를 관리하기 위한 코드 없는 솔루션을 제공합니다 직관적인 드래그 앤 드롭 시스템을 통해 crud 작업을 쉽게 수행할 수 있습니다 관리자 인터페이스 활성화 “더보기” 섹션으로 이동하세요 back4app 대시보드에서 “관리자 앱”을 클릭하세요 그런 다음 “관리자 앱 활성화”를 선택하세요 관리자 자격 증명을 구성하세요 첫 번째 관리자 사용자를 설정하여 이는 b4aadminuser 와 같은 역할과 필요한 시스템 컬렉션을 설정합니다 관리자 앱 활성화 활성화 후, 데이터 관리를 시작하기 위해 관리자 인터페이스에 로그인하세요 관리자 앱 대시보드 관리자 인터페이스를 통한 crud 작업 실행 관리자 인터페이스 내에서 다음을 수행할 수 있습니다 레코드 생성 컬렉션(예 항목)에서 “레코드 추가” 버튼을 사용하여 새 데이터를 삽입합니다 레코드 보기 또는 업데이트 레코드를 클릭하여 필드를 검사하거나 수정합니다 레코드 삭제 삭제 옵션을 사용하여 오래된 항목을 제거합니다 이 간소화된 인터페이스는 데이터 관리를 간단하고 효율적으로 만듭니다 4단계 – next js를 back4app에 연결하기 백엔드가 설정되면, 다음 단계는 next js 애플리케이션을 연결하는 것입니다 옵션 a parse sdk 사용하기 parse sdk 설치하기 npm install parse next js 앱에서 parse 초기화하기 파일을 생성하세요 (예 lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; next js 페이지에 parse 통합하기 예를 들어, 항목을 가져오고 표시하는 페이지를 생성하세요 // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } 옵션 b rest 또는 graphql 사용하기 parse sdk를 사용하지 않으려면 rest 또는 graphql로 crud 작업을 관리할 수 있습니다 예를 들어, rest를 통해 아이템을 가져오려면 const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 필요에 따라 이러한 api 호출을 next js 컴포넌트에 통합하세요 5단계 – 백엔드 보안 액세스 제어 목록(acl) 구현하기 객체에 acl을 할당하여 데이터를 보호하세요 예를 들어, 소유자만 접근할 수 있는 아이템을 생성하려면 async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } 클래스 수준 권한 설정 (clps) back4app 대시보드 내에서 각 컬렉션의 clps를 조정하여 데이터 접근을 인증된 사용자로 제한합니다 단계 6 – 사용자 인증 구현 사용자 계정 설정 back4app은 인증을 위해 parse의 내장 사용자 클래스를 활용합니다 next js 앱에서 등록 및 로그인을 아래와 같이 관리합니다 // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } 로그인 및 세션 관리에 유사한 접근 방식을 사용할 수 있습니다 또한 back4app 대시보드를 통해 소셜 로그인, 이메일 인증 및 비밀번호 복구와 같은 추가 기능을 활성화할 수 있습니다 7단계 – next js 프론트엔드 배포 back4app의 배포 옵션을 사용하면 github 통합 또는 docker 컨테이너화를 통해 next js 애플리케이션을 손쉽게 호스팅할 수 있습니다 7 1 프로덕션 버전 빌드하기 터미널에서 프로젝트 디렉토리를 엽니다 빌드 명령을 실행합니다 npm run build 이것은 최적화된 정적 및 서버 렌더링 파일을 포함하는 next 폴더를 생성합니다 7 2 코드 정리 및 업로드 저장소에는 next js 앱의 모든 소스 파일이 포함되어야 합니다 일반적인 구조는 다음과 같을 수 있습니다 basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md 예시 lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 예시 pages/index js (4단계에서 제공된 코드 조각을 참조하세요) 코드를 github에 커밋하기 git 저장소 초기화 git init 모든 파일 추가 git add 변경 사항 커밋 git commit m "initial commit of next js crud application" github 저장소 생성 예를 들어, 이름을 basic crud app nextjs 로 지정합니다 코드 푸시 git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 back4app 웹 배포 통합 웹 배포 접근 back4app 대시보드에 로그인하고, 프로젝트로 이동하여 웹 배포 기능을 선택합니다 github 계정 연결 프롬프트에 따라 리포지토리를 연결합니다 리포지토리 및 브랜치 선택 리포지토리(예 basic crud app nextjs )와 코드가 포함된 브랜치(예 main )를 선택합니다 7 4 배포 설정 구성 빌드 명령 리포지토리에 미리 빌드된 next 폴더가 포함되어 있지 않으면, 명령을 지정합니다(예 npm run build ) 출력 디렉토리 출력 디렉토리를 next 로 설정하여 back4app이 컴파일된 파일이 있는 위치를 알 수 있도록 합니다 환경 변수 api 키와 같은 필요한 환경 변수를 추가합니다 7 5 docker로 next js 애플리케이션 컨테이너화하기 배포를 위해 docker를 선호하는 경우, 리포지토리에 dockerfile 을 포함하세요 # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] back4app에서 docker 배포 옵션을 선택하여 애플리케이션을 컨테이너화하고 배포하세요 7 6 애플리케이션 시작하기 애플리케이션 배포 back4app에서 배포 버튼을 클릭하세요 빌드 프로세스 모니터링 back4app이 코드를 가져오고, 빌드 명령을 실행하며, 애플리케이션을 배포합니다 실시간 애플리케이션 접근 배포가 완료되면, next js 애플리케이션이 호스팅되는 url이 제공됩니다 7 7 배포 확인하기 제공된 url 방문하기 브라우저에서 url을 엽니다 기능 테스트 페이지가 올바르게 로드되고 모든 crud 작업이 작동하는지 확인합니다 필요시 문제 해결 브라우저 개발자 도구와 back4app 로그를 사용하여 문제를 진단합니다 8단계 – 결론 및 다음 단계 축하합니다! next js와 back4app을 사용하여 강력한 crud 애플리케이션을 성공적으로 구축했습니다 프로젝트를 구성하고 맞춤형 컬렉션을 설계했으며 next js 프론트엔드를 안전한 백엔드와 연결했습니다 다음 단계 프론트엔드 향상 상세 보기, 검색 기능 또는 실시간 업데이트와 같은 고급 기능으로 next js 앱을 확장합니다 백엔드 증강 클라우드 기능, 타사 통합 또는 추가 액세스 제어를 탐색합니다 계속 배우기 더욱 최적화 및 사용자 정의를 위해 https //www back4app com/docs 및 next js 리소스를 방문하세요 이 튜토리얼을 따라함으로써 이제 next js와 back4app을 사용하여 확장 가능하고 안전한 crud 애플리케이션을 만들 수 있는 기술을 갖추게 되었습니다 즐거운 코딩 되세요!