NextJS : next14에서 Day.js 사용 시 타임존 차이 (서버컴포넌트 vs 클라이언트 컴포넌트)

 

개요

 

next14에서 dayjs를 사용하여 시간에 대한 작업을 진행하고 있었는데요, 실제로 배포를 하였을 때 프로젝트에서 컴포넌트별로 시간값이 다른 문제가 발생하였습니다.

 

해당 문제가 왜 발생했는지 알아보고 해결법을 공유해보도록 하겠습니다.

 

 

문제점

 

문제의 원인은 서버 컴포넌트와 클라이언트 컴포넌트가 실제로 동작하는 환경이 달라서, 즉 서버와 클라이언트의 시간대가 달라서 발생한 것것이였습니다. 보통 서버컴포넌트는 서버의 시스템의 시간대에 따라서 시간을 처리하지만, 클라리언트 컴포넌트는 브라우저의 시간대에 맞춰 날짜와 시간을 변환하여 처리하게 됩니다.

 

실제로 로컬로 테스트를 할때는 위와 같은 문제가 발생하지 않았는데, 현재 제가 개발하고 있는 Mac 환경의 시간대도 한국 시간대(UTC+9)로 설정되어 있기 때문입니다. 그래서 서버 컴포넌트에서도 올바른 시간이 출력되어 문제가 없다고 생각하고 있었습니다.

 

하지만 제가 AWS의 Amplify로 프로젝트를 배포하게 되었는데,  AWS의 Amplify는 Lambda 함수를 내부적으로 사용하며 해당 Lambda함수에서 Nextjs가 동작하기 위한 Node.js 환경을 실행하게 됩니다. Lambda는 기본적으로 timezone이 UTC(UTC+0)을 따르게 되어, 클라이언트 컴포넌트와 서버 컴포넌트의 시간대가 달라지는 문제가 발생한 것이었습니다.

 

 

해결방법

 

해당 문제는 Asia/Seoul을 timezone으로 사용하는 util 함수를 만들어서 적용하여 간단히 해결하였습니다.

 

// utils.ts
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

type DayjsArguType = Parameters<typeof dayjs>;
export const dayjsWithTimezone = (...args: DayjsArguType) => dayjs(...args).tz('Asia/Seoul');

// todayDate.tsx
import React from 'react';
import { dayjsWithTimezone } from '@/utils/utils';

export default function todayDate() {
  return (
    <div className={styles.todayDate}>
      <p className={styles.month}>{dayjsWithTimezone().month() + 1}월</p>
      <p className={styles.date}>{dayjsWithTimezone().date()}일</p>
    </div>
  );
}

 

위와 같이 `dayjsWithTimezone`이라는 유틸함수를 만들어서 dayjs()를 사용하는 것과 동일하게 import 해서 사용하면 됩니다.

 

이렇게 하면 서버컴포넌트, 클라이언트 컴포넌트 모두 동일한 timezone에 대해서 날짜를 확인할 수 있습니다.

(현재는 서울 시간대기준으로 통일)

 

 

마무리

 

오늘은 dayjs와 nextjs를 통해 개발하면서 발생한 timezone 문제점에 대해 원인과 해결방법을 알아보았습니다.

 

항상 느낀 것이지만 로컬환경으로 개발할 때와 실제 배포해 봤을 때는 항상 예상하지 못한 문제가 발생할 수 있기 때문에, 배포 주기를 짧게 유지하고, 배포환경에서 자주 문제가 없는지 확인해 봐야겠다고 다시 생각하게 되었습니다.

 

다음번에도 도움이 되는 내용으로 포스팅하도록 하겠습니다.

 

감사합니다.!