Next.js로 뉴스 앱 개발하기

18 Oct 2023

nextjs

소개

Next.js는 React 기반의 서버 사이드 렌더링을 지원하는 프레임워크입니다. 이를 활용하여 뉴스 앱을 개발하는 방법에 대해 알아보겠습니다.

필요한 도구

Node.js: v10 이상
npm 패키지 매니저

프로젝트 설정

빈 디렉토리를 만들고, 해당 디렉토리에서 터미널을 실행합니다.
다음 명령어를 실행하여 새로운 Next.js 프로젝트를 생성합니다.
```
 npx create-next-app .
```
생성된 프로젝트 디렉토리로 이동합니다.
```
 cd my-news-app
```

API 호출

뉴스를 가져오기 위해 외부 API를 호출해야 합니다. 본 예시에서는 NewsAPI를 사용합니다.

NewsAPI에 회원 가입을 하고 API 키를 발급받습니다.
프로젝트 디렉토리에서 .env.local 파일을 생성하고, 아래와 같이 API 키를 추가합니다.
```
 API_KEY=your_api_key_here
```
.env.local 파일을 다음과 같이 설정하여 API 키를 불러옵니다.
```
 const apiKey = process.env.API_KEY;
```

페이지 추가

pages 디렉토리 아래에 index.js를 생성하고, 다음과 같이 코드를 작성합니다.

 import axios from 'axios';

 export default function Home({ articles }) {
   return (
     <div>
       <h1>뉴스 앱</h1>
       <ul>
         {articles.map((article) => (
           <li key={article.title}>{article.title}</li>
         ))}
       </ul>
     </div>
   );
 }

 export async function getStaticProps() {
   const apiKey = process.env.API_KEY;
   const url = `https://newsapi.org/v2/top-headlines?country=kr&apiKey=${apiKey}`;

   const response = await axios.get(url);
   const articles = response.data.articles;

   return {
     props: {
       articles,
     },
   };
 }

앱을 실행하여 뉴스가 잘 표시되는지 확인합니다.
```
 npm run dev
```

결론

위에서 살펴본 것처럼 Next.js를 활용하여 간단한 뉴스 앱을 개발할 수 있습니다. Next.js의 SSR 기능을 통해 초기 로딩 시간을 최소화하고, 외부 API를 호출하여 실시간 뉴스를 가져올 수 있습니다.

#Next.js #뉴스앱