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

49min
소개
이 가이드에서는 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 계정입니다.
안내를 보려면 Back4app 시작하기를 참조하세요.
Next.js 개발 환경입니다.
 Create Next App 또는 유사한 도구를 사용하세요. Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Next.js 및 API 통합에 대한 기본 이해입니다.
필요한 경우 Next.js 문서를 방문하여 개요를 확인하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-NextJS 및 프롬프트를 따르세요.
새 프로젝트 만들기
﻿
새 프로젝트가 대시보드에 나타나며, 백엔드의 핵심 역할을 합니다.
Next.js 애플리케이션 만들기
터미널을 열고 다음을 실행하세요:
Bash
npx create-next-app@latest basic-crud-app-nextjs
npx create-next-app@latest basic-crud-app-nextjs
﻿
프로젝트 디렉토리로 변경하세요:
Bash
cd 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 대시보드 메뉴에서 찾으세요.
데이터 모델 설명하기:
컬렉션과 필드 요구 사항을 설명하는 자세한 프롬프트를 붙여넣으세요.
검토 및 적용:
생성된 스키마를 확인하고 프로젝트에 적용하세요.
샘플 프롬프트
Text
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)
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 설치하기:
Bash
npm install parse
npm install parse
﻿
Next.js 앱에서 Parse 초기화하기:
파일을 생성하세요 (예: lib/parseConfig.js):
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;
// 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 통합하기:
예를 들어, 항목을 가져오고 표시하는 페이지를 생성하세요.
JS
// 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>
  );
}
// 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를 통해 아이템을 가져오려면:
JS
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();
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을 할당하여 데이터를 보호하세요. 예를 들어, 소유자만 접근할 수 있는 아이템을 생성하려면:
JS
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);
  }
}
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 앱에서 등록 및 로그인을 아래와 같이 관리합니다:
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>
  );
}
// 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 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이것은 최적화된 정적 및 서버 렌더링 파일을 포함하는 .next 폴더를 생성합니다.
﻿
7.2 코드 정리 및 업로드
저장소에는 Next.js 앱의 모든 소스 파일이 포함되어야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
basic-crud-app-nextjs/
├── node_modules/
├── pages/
│   ├── index.js
│   └── signup.js
├── lib/
│   └── parseConfig.js
├── public/
│   └── favicon.ico
├── package.json
└── README.md
﻿
예시: lib/parseConfig.js
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;
// 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 저장소 초기화:
Bash
git init
git init
﻿
모든 파일 추가:
Bash
git add .
git add .
﻿
변경 사항 커밋:
Bash
git commit -m "Initial commit of Next.js CRUD application"
git commit -m "Initial commit of Next.js CRUD application"
﻿
GitHub 저장소 생성:
예를 들어, 이름을 basic-crud-app-nextjs로 지정합니다.
코드 푸시:
Bash
git remote add origin https://github.com/your-username/basic-crud-app-nextjs.git
git push -u origin main
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을 포함하세요:
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;"]
# 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 앱을 확장합니다.
백엔드 증강:
클라우드 기능, 타사 통합 또는 추가 액세스 제어를 탐색합니다.
계속 배우기:
더욱 최적화 및 사용자 정의를 위해 Back4app 문서 및 Next.js 리소스를 방문하세요.
이 튜토리얼을 따라함으로써 이제 Next.js와 Back4app을 사용하여 확장 가능하고 안전한 CRUD 애플리케이션을 만들 수 있는 기술을 갖추게 되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	사용자 인증을 위한 안전하게 해시된 비밀번호.
생성일	날짜	계정이 생성된 시간.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with PHP?
앵귤러로 기본 CRUD 앱 만드는 방법?