Next.js 14 App Router 가이드를 통한 Dashboard 구현

 

 

27일 새벽 App Router의 새로운 가이드가 Release 되었고 주말 동안 새로운 가이드를 통해 Dashboard를 구현해 보았습니다!

가이드에는 어떠한 내용들이 포함되어 있나요?

가이드에는 CSS 스타일링, Layout과 Page.tsx의 이해, 데이터 Fetching과 서버컴포넌트에서 데이터를 불러와 Suspense를 사용하는 법, DB에 직접 쿼리를 날려 데이터를 불러오는 법, Error Handling, Metadata주입하는 법, 로그인/로그아웃 등 총 16개의 챕터가 있으며 하나의 애플리케이션을 처음부터 끝까지 만드는 과정이 담겨있습니다.

 

이 중에서 가장 인상 깊었던 것은 API Endpoint를 구현하지 않고 직접 DB에 연결하여 데이터를 가져오는 것이었습니다.

프론트 서버에서 직접 DB에 쿼리문을 날려 데이터를 뽑아오는 건 익숙하지 않았지만 가이드에서 제공하는 샘플 코드가 있기 때문에 이 부분은 문제없이 진행할 수 있었습니다.

 

또한 해당 가이드를 진행하며  쿼리스트링으로 검색값을 다루는 법, Server Component에서 데이터를 fetching 하고 해당 컴포넌트를 Suspense로 감싸주어 컴포넌트 Streaming 하는 법 등 Server Component에서 사용할 수 있는 많은 예시코드들과 직접 실습을 해볼 수 있었습니다.

주니어 프런트엔드 개발자이고 Next.js에 관심이 있다면 한번 실습을 해보고 반복하여 학습하시는걸 강력히 추천드립니다!

 

이 모든것이 공짜🤩

DB, 배포 전부 Vercel에서 제공해 주기 때문에 Vercel의 hobby 플랜 계정을 사용하여 무료로 위의 Dashboard 구현을 실습해 볼 수 있습니다

 

New App Router Guide
https://nextjs.org/learn

Next.js by Vercel - The React Framework | Next.js by Vercel - The React Framework