![]()
이번에 Next.js 13.2버전이 나오면서 여러 기능들이 추가됐습니다. 어떤 내용인지 알아봅시다. Built-in SEO Support 기존의 Next.js 12버전에서는 next/head를 사용했고 Next.js 13버전에서는 head.js 파일에서 meta 태그나 open graph를 넣어줬죠. Next.js 13.2에서는 좀 더 쉬운 인터페이스를 사용합니다. 아래 코드와 같이 static, dynamic 메타데이터를 define할 수 있습니다. // app/layout.tsx import type { Metadata } from 'next'; // static한 메타데이터 export const metadata: Metadata = { title: 'Next.js 13.2&#..
![]()
이전 포스팅인디자인 패턴(Singleton, Facade)을 사용한 Analytics 코드설계에서 Analytics 코드에 관한 내용을 공유했었습니다. 2주 동안 이벤트를 수집하는 과정에서 한 가지 이슈가 발생했습니다. analytics를 통해 수집한 데이터와 실제 데이터를 비교했더니 25% 정도의 데이터 손실이 있었습니다. 아무래도 client side에서 이벤트를 수집하다보니 ads blocker에 의해 손실이 발생한 것 이었죠. 이를 해결하기 위해 Next.js api route로 proxy 서버를 구축했던 경험과 그 과정에서 겪었던 어려움을 공유해보겠습니다. 이 포스팅을 읽고 난 뒤에는 아래의 내용들을 이해하게 됩니다. Next.js로 proxy 서버 구축하기 Client-Side Tracking..
![]()
Next.js conf에서 13버전이 공개됐습니다. 프런트엔드 개발자로서 이번 conf를 보고 대격변이라고 생각이 들 정도로 많은 기능들과 제품들을 소개했는데요. 어떤 것들이 있었는지 Next.js beta 공식문서를 하나씩 읽어보면서 알아보겠습니다. Routing Next.js 13에서는 새로운 file-system routing이 추가됐습니다. 기존에는 pages/ 디렉토리를 사용했었는데 이제는 app/ 을 사용하시면 됩니다. 점진적으로 도입하기 위해서 pages/ 디렉토리를 여전히 사용할 수도 있습니다. app에 생성한 component는 기본적으로 React Server Component이지만 Client Component로도 생성할 수 있습니다. React Server Component와 Cli..
Next.js에서 unit testing을 위해 jest, testing-library를 활용하여 테스트 환경을 구축해봅시다. 패키지 설치해야할 패키지들은 아래와 같습니다. $ yarn add next react react-dom $ yarn add --dev jest @testing-library/jest-dom @testing-library/react babel-jest Babel 루트 경로에 babel.config.js를 생성한 뒤 아래의 코드를 작성하세요. next/babel preset은 next를 설치할때 같이 설치됩니다. 이 preset은 react application과 ssr에 사용되는 코드를 컴파일하는데에 사용됩니다. module.exports = { presets: [ ['ne..
