[Naver 뉴스 API] NextJS에서 네이버 뉴스 데이터 수집 방법

 

 

1. 네이버 개발자 센터

네이버 개발자 센터에서 앱 등록 후 Client 정보를 발급 받는다.

NAVER Developers

 

 

1-1) 애플리케이션 등록

상단 탭 Application > 애플리케이션 등록 클릭

애플리케이션 등록

• 웹 서비스 url이 아직 없는 경우 localhost를 등록한다.

 

 

1-2) Client 정보

등록 후 애플리케이션 정보로 자동으로 이동하게 되는데 해당 ID, Secret은 네이버 API를 사용하기 위해 필요하다.

 

 

 

---

2. 네이버 뉴스 API

검색 > 뉴스 - Search API

 

2-1) 요청 URL 방식

요청 URL	반환 형식
https://openapi.naver.com/v1/search/news.xml	XML
https://openapi.naver.com/v1/search/news.json	JSON

 

 

2-2)  파라미터

파라미터	타입	필수 여부	설명
query	String	Y	검색어. UTF-8로 인코딩되어야 합니다.
display	Integer	N	한 번에 표시할 검색 결과 개수(기본값: 10, 최댓값: 100)
start	Integer	N	검색 시작 위치(기본값: 1, 최댓값: 1000)
sort	String	N	검색 결과 정렬 방법 - sim: 정확도순으로 내림차순 정렬(기본값) - date: 날짜순으로 내림차순 정렬

 

CMD 테스트 예

curl "https://openapi.naver.com/v1/search/news.xml?query=%EC%A3%BC%EC%8B%9D&display=10&start=1&sort=sim" \ -H "X-Naver-Client-Id: {애플리케이션 등록 시 발급받은 클라이언트 아이디 값}" \ -H "X-Naver-Client-Secret: {애플리케이션 등록 시 발급받은 클라이언트 시크릿 값}" -v

 

 

 

---

3.  NextJS 구현 코드

주의할 점은 Naver의 경우 클라이언트에서 요청을 허용하지 않고 있어 CORS 오류가 발생한다. 
프록시를 사용하여 우회 요청해야 한다.

 

 

3-1) 프록시 구현 package.json

{
  "name": "companion",
  "version": "0.1.0",
  "private": true,
  
   // 프록시 추가
  "proxy": "https://openapi.naver.com",
  
   ...
  }

• proxy를 추가해 준다.

 

3-2) next.config.js 수정

NextJS일 경우만  rewrites를 추가해 준다.

const nextConfig = {
  reactStrictMode: false,
  async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "https://openapi.naver.com/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

 

 

3-3) 네이버 뉴스 API 호출

import axios from "axios";

const CLINET_ID = process.env.NEXT_PUBLIC_API_KEY_NAVER_ID;
const CLINET_PW = process.env.NEXT_PUBLIC_API_KEY_NAVER_PW;
const BASE_PATH = "/v1/search/news.json?";

interface INews {
  title: string;
  originallink: string;
  link: string;
  description: string;
  pubDate: string;
}

export interface IGetNewsListResult {
  items: INews[];
}


export async function NewsList() {
  return axios
    .get(`${BASE_PATH}`, {
      params: {
        query: "반려동물",
        sort: "sim",
        display: 4,
      },
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        "X-Naver-Client-Id": CLINET_ID,
        "X-Naver-Client-Secret": CLINET_PW,
      },
    })
    .then((response) => response.data)
    .catch((error) => {
      console.log("오류 발생", error.status);
      // catch 부분은 추후 에러 페이지 추가 후 해당 페이지로 이동
      if (error.status === 403) {
        //window.location.href = "/404";
      }
    });
}

• evn은 git에 올라가지 않기 위해 설정한 파일이다.

2022.10.18 - [React] - [NextJS] .evn(환경 변수) 사용 방법

[NextJS] .evn(환경 변수) 사용 방법