Next.js에서 REST API를 생성하고 사용하는 방법-JS 튜토리얼-php.cn

How to Create and Consume a REST API in Next.js

Next.js는 서버 측 렌더링 및 정적 사이트 생성 기능으로 널리 알려져 있지만 서버를 사용하여 본격적인 애플리케이션을 구축할 수도 있습니다. -API를 포함한 측면 기능. Next.js를 사용하면 프레임워크 자체 내에서 직접 REST API를 쉽게 생성할 수 있으며, 이는 프런트엔드 애플리케이션이나 외부 서비스에서 사용할 수 있습니다.

이 블로그 게시물에서는 Next.js에서 간단한 REST API를 생성하는 방법과 애플리케이션 내부와 외부에서 해당 API를 사용하는 방법을 살펴보겠습니다. 결국에는 Next.js 프로젝트에서 API를 구축하고 API와 상호 작용하는 방법을 확실하게 이해하게 될 것입니다.

Next.js에서 REST API 생성

Next.js는 pages/api 디렉토리를 사용하여 API 경로를 구축하는 간단한 방법을 제공합니다. 이 디렉터리에 생성하는 각 파일은 자동으로 API 엔드포인트가 되며, 여기서 파일 이름은 엔드포인트의 경로에 해당합니다.

1단계: 새 Next.js 프로젝트 설정

아직 Next.js 프로젝트가 없다면 다음 명령을 실행하여 쉽게 만들 수 있습니다.

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

로그인 후 복사

이렇게 하면 기본 Next.js 애플리케이션이 생성되고 개발 서버가 시작됩니다. 이제 REST API 구축을 시작할 수 있습니다.

2단계: API 경로 생성

Next.js에서는 API 경로가 pages/api 폴더 내에 생성됩니다. 예를 들어, 사용자 관리를 위한 간단한 API를 생성하려면 pages/api 디렉터리 내에 users.js
라는 파일을 생성하면 됩니다.

mkdir pages/api
touch pages/api/users.js

로그인 후 복사

users.js 내부에서 API 경로를 정의할 수 있습니다. 다음은 사용자 목록으로 응답하는 간단한 예입니다.

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

로그인 후 복사

3단계: MongoDB 연결 유틸리티 생성
API 요청이 있을 때마다 새 데이터베이스 연결을 열지 않으려면 재사용 가능한 MongoDB 연결 유틸리티를 만드는 것이 가장 좋습니다. MongoDB 인스턴스에 대한 연결과 연결 재사용을 처리하는 lib/mongodb.js 파일을 생성하면 됩니다.

다음은 간단한 MongoDB 연결 유틸리티의 예입니다.

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

로그인 후 복사

4단계: .env.local에서 MongoDB URI 설정
MongoDB URI를 안전하게 저장하려면 프로젝트의 루트 디렉터리에 .env.local 파일을 만듭니다. 여기에 MongoDB URI를 추가하세요:

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

로그인 후 복사

MongoDB Atlas를 사용하는 경우 Atlas 대시보드에서 이 URI를 얻을 수 있습니다.

5단계: MongoDB와 상호 작용하기 위한 API 경로 생성

req.method 속성을 검사하여 API에서 다양한 HTTP 메서드(GET, POST, PUT, DELETE)를 처리할 수 있습니다. 다음은 HTTP 메소드에 따라 다르게 응답하는 users.js 파일의 업데이트 버전입니다.

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

로그인 후 복사

이제 API는 사용자를 관리하기 위해 GET, POST, PUT 및 DELETE 요청을 처리할 수 있습니다.

GET은 모든 사용자를 가져옵니다.
POST 새 사용자를 추가합니다.
PUT은 기존 사용자를 업데이트합니다.
DELETE 사용자를 제거합니다.

6단계: API 테스트

이제 API를 설정했으므로 Postman 또는 cURL과 같은 도구를 사용하여 요청하여 테스트할 수 있습니다. 각 방법의 URL은 다음과 같습니다.

사용자 목록을 검색하기 위해 /api/users에 대한 GET 요청.
새 사용자를 생성하기 위해 /api/users에 대한 POST 요청(요청 본문에 사용자 데이터 전송).
기존 사용자를 업데이트하기 위해 /api/users에 대한 PUT 요청(요청 본문에 사용자 데이터 전송)
사용자 삭제를 위해 /api/users에 대한 DELETE 요청(요청 본문에 사용자 ID 전송)

5단계: API 보호(선택 사항)

무단 액세스를 방지하기 위해 API에 몇 가지 기본 인증 또는 승인을 추가할 수 있습니다. req.headers를 검사하거나 환경 변수를 사용하여 API 키를 저장하면 쉽게 이 작업을 수행할 수 있습니다. 예를 들면 다음과 같습니다.

mkdir pages/api
touch pages/api/users.js

로그인 후 복사

Next.js 애플리케이션에서 REST API 사용

이제 API가 설정되었으므로 Next.js 애플리케이션 내에서 이를 사용하는 방법을 살펴보겠습니다. API를 사용하는 방법은 여러 가지가 있지만 가장 일반적인 접근 방식은 fetch(또는 Axios와 같은 라이브러리)를 사용하여 HTTP 요청을 만드는 것입니다.

1단계: getServerSideProps를 사용하여 데이터 가져오기

서버측 API에서 데이터를 가져와야 하는 경우 페이지를 렌더링하기 전에 Next.js의 getServerSideProps를 사용하여 데이터를 가져올 수 있습니다. 다음은 페이지 구성 요소 내에서 /api/users 엔드포인트를 사용하는 방법에 대한 예입니다.

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

로그인 후 복사

이 예에서 사용자가 /users 페이지를 방문하면 getServerSideProps는 페이지를 렌더링하기 전에 API에서 사용자 목록을 가져옵니다. 이렇게 하면 페이지가 로드될 때 데이터를 이미 사용할 수 있습니다.

2단계: useEffect를 사용하여 클라이언트 측 데이터 가져오기

React의 useEffect 후크를 사용하여 API 클라이언트 측을 사용할 수도 있습니다. 이는 페이지가 로드된 후 데이터를 가져오는 데 유용합니다.

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

로그인 후 복사

이 예에서는 구성 요소가 마운트된 후 API 요청이 이루어지고 구성 요소의 상태에 따라 사용자 목록이 업데이트됩니다.

3단계: 데이터 추가를 위한 POST 요청 수행

API로 데이터를 보내려면 POST 요청을 사용할 수 있습니다. 다음은 새로운 사용자의 데이터를 /api/users 엔드포인트로 보내는 방법에 대한 예입니다.

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

로그인 후 복사

이 예에서는 새 사용자의 이름과 이메일이 POST 요청으로 API에 전송됩니다. 요청이 성공하면 경고가 표시됩니다.

결론

Next.js를 사용하면 동일한 프레임워크 내에서 직접 REST API를 구축하고 사용하는 것이 놀라울 정도로 쉽습니다. API 경로 기능을 사용하면 CRUD 작업을 처리하고 프런트엔드와 원활하게 통합할 수 있는 서버리스 엔드포인트를 생성할 수 있습니다.

이 게시물에서는 Next.js에서 REST API를 생성하고, 다양한 HTTP 메소드를 처리하고, 서버측(getServerSideProps 사용) 및 클라이언트측(useEffect 사용)에서 해당 API를 사용하는 방법을 다루었습니다. 이는 최소한의 구성으로 풀 스택 애플리케이션을 구축할 수 있는 많은 가능성을 열어줍니다.

Next.js는 통합 백엔드 기능을 갖춘 확장 가능한 애플리케이션을 구축하기 위한 유연하고 간단한 솔루션을 개발자에게 지속적으로 제공합니다. 즐거운 코딩하세요!

위 내용은 Next.js에서 REST API를 생성하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!