Next.js용 JSON 서버 당신이 알아야 할 모든 것

이 가이드에서는 JSON 서버를 활용하여 모의 API를 생성하고 이를 TypeScript로 구축된 Next.js 15 애플리케이션에 원활하게 통합하는 방법을 보여줍니다. 우리는 설정을 다루고 실제 예제를 통해 각 HTTP 메서드(GET, POST, PUT, DELETE)를 설명하고 데이터 가져오기를 위한 Next.js 15의 새로운 use 기능의 사용을 강조할 것입니다.

JSON 서버 이해

JSON 서버는 간단한 JSON 파일을 사용하여 RESTful API 생성을 단순화합니다. 주요 기능은 다음과 같습니다:

• CRUD 작업: 데이터 관리를 위한 GET, POST, PUT 및 DELETE 요청을 지원합니다.
• 동적 라우팅: 더 복잡한 API 구조에 맞게 엔드포인트를 사용자 정의할 수 있습니다.
• 사용자 친화성: 시작하는 데 최소한의 설정과 구성이 필요합니다.

Next.js 15가 포함된 JSON 서버가 필요한 이유는 무엇인가요?

이 조합은 여러 가지 장점을 제공합니다.

• 프런트엔드 중심 개발: 백엔드가 완전히 개발되기 전에 UI 구성요소를 빌드하고 개선하세요.
• 신속한 프로토타이핑: 백엔드 통합에 의존하지 않고 기능을 빠르게 테스트하고 반복합니다.
• 사용자 정의 가능한 API 시뮬레이션: 철저한 테스트를 위해 다양한 백엔드 동작을 손쉽게 모방합니다.

JSON 서버 설정

1. JSON 서버 설치

Next.js 프로젝트 내에서 개발 종속성으로 JSON 서버를 설치합니다.

<code class="language-bash">npm install --save-dev json-server</code>

2. 데이터베이스 파일 생성

프로젝트의 루트 디렉터리에 db.json 파일을 만듭니다.

<code class="language-json">{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane@example.com" }
  ]
}</code>

3. JSON 서버 구성

서버를 시작하려면 package.json에 스크립트를 추가하세요.

<code class="language-json">"scripts": {
  "json-server": "json-server --watch db.json --port 4000"
}</code>

--delay

사용

--delay 플래그는 네트워크 대기 시간을 시뮬레이션하여 로딩 상태를 테스트하는 데 유용합니다.

<code class="language-json">"scripts": {
  "json-server": "json-server --watch db.json --port 4000 --delay 1000"
}</code>

1초 지연이 발생합니다. 다음을 사용하여 서버를 시작하십시오.

<code class="language-bash">npm run json-server</code>

귀하의 API는 http://localhost:4000에서 액세스할 수 있습니다.

HTTP 메소드 작업

1. GET: 데이터 검색

GET 메소드는 데이터를 가져옵니다. 사용자를 검색하는 방법은 다음과 같습니다.

<code class="language-typescript">'use client';

import { use } from 'react';

async function fetchUsers() {
  const res = await fetch('http://localhost:4000/users');
  if (!res.ok) {
    throw new Error('Failed to fetch users');
  }
  return res.json();
}

export default function UsersPage() {
  const users = use(fetchUsers());

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user: { id: number; name: string }) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}</code>

설명:

• fetchUsers: 사용자 데이터를 비동기식으로 가져옵니다.
• use: 서버 측 데이터 가져오기를 위한 Next.js 15 후크

2. POST: 데이터 추가

POST 메소드는 새 레코드를 생성합니다.

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function AddUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleAddUser = async () => {
    const res = await fetch('http://localhost:4000/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email }),
    });

    if (res.ok) {
      alert('User added successfully!');
    }
  };

  return (
    <div>
      <h2>Add New User</h2>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={handleAddUser}>Add User</button>
    </div>
  );
}</code>

3. PUT: 데이터 업데이트 중

PUT 메소드는 기존 레코드를 수정합니다.

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function UpdateUser() {
  // ... (similar to POST, but with an ID field and PUT request)
}</code>

4. DELETE: 데이터 삭제

DELETE 메소드는 레코드를 제거합니다.

<code class="language-typescript">'use client';
import { useState } from 'react';

export default function DeleteUser() {
  // ... (similar to PUT, but with a DELETE request)
}</code>

모범 사례

• 포트 관리: 충돌하지 않는 포트를 사용하세요(Next.js의 기본 3000은 피하세요).
• 강력한 오류 처리: 모든 API 호출에 포괄적인 오류 처리를 구현합니다.
• TypeScript 입력: 향상된 유형 안전성을 위해 데이터 유형을 정의합니다.
• 환경 변수: 더 나은 구성 관리를 위해 .env 파일에 API URL을 저장합니다.
• 지연 시뮬레이션: --delay을 활용하여 로딩 상태를 테스트하고 느린 네트워크 조건을 시뮬레이션합니다.

결론

JSON 서버는 Next.js 15 프런트엔드 개발을 위한 귀중한 자산으로, API를 모의하고 개발을 크게 가속화할 수 있는 간단하면서도 효과적인 수단을 제공합니다. 모든 HTTP 메서드에 대한 이러한 예를 통해 JSON Server를 프로젝트에 원활하게 통합할 수 있습니다.

위 내용은 Next.js용 JSON 서버 당신이 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!