vercel. Nodejs 22 이하 버전 지원 중지

시작하면서

나는 vercel에 사이트를 배포하고 있다.

이유는 단순히,
무료버전이 있고,
배포하기가 간단해서이다.

배포 방법은 매우 간단하다.

회원가입을 하고,
Next.js으로 작성한 코드를 github에 올리고
vercel과 github를 연결만하면 된다.

어제 vercel에 들어가보니
9월부터 Node.js 22 이하를 지원하지 않는다고 한다.

울며 겨자먹기식으로
node.js업데이트를 시작했다...

Node.js 업데이트

노드 업데이트는 간단하다.
https://nodejs.org/ 에서
다운로드하고 설치하면 끝이다.

아니면 터미널에서 nvm 명령을 사용해도 된다.

# 설치 가능 버전 확인
nvm ls-remote
# 원하는 버전 설치
nvm install 22.18
# 버전 사용
nvm use 22.18
# 디폴트 설정
nvm alis default 22.18

당연한 얘기이지만,
CI/CD 테스트를 먼저하는 것이 좋다.
(Continuous Integration/Continuous Deployment)

보통 엔진 업데이트를 하면
수정할 코드량이 많아지기 때문에
중간 중간 git을 이용해
branch분기를 만드는 것이 좋다.

Package 호환성

업데이트하고 체크할 것은
우선 패키지들의 호환성이다.

# 업데이트 필요 리스트 출력
npm outdated

나의 경우...
next, tailwindcss, npm 등등..
대부분 업데이트가 필요했다.

npm 업데이트

우선 npm 을 업데이트 한다.
그래야 패키지를 정상 설치할 수 있다.

npm install -g npm

npm-check-updates 설치, 실행

한번에 package.json을 수정하고
패키지를 설치하기 위해서
npm-check-updates을 설치하고 실행했다.

# npm-check-updates 설치
npm install -g npm-check-updates
# 현재 위치의 package.json 수정
npx npm-check-updates -u
# package.json 기준 패키지 다시 설치
npm install

에러

대망의 검사 시간...
에러가 나는 것은 당연하다.

처음 만난 에러는 tailwind이다.

PostCSS 에러

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

문장에 써 있는 것처럼
이제 PostCSS가 아닌 @tailwindcss/postcss을 사용한다.

Tailwind- @tailwindcss/postcss 사용법 : https://tailwindcss.com/docs/installation/using-postcss

우선 @tailwindcss/postcss을 설치한다.

npm install tailwindcss @tailwindcss/postcss postcss
# postcss 가 이미 있으면 같이 설치는 필요없다

그리고 설정값을 변경해야 한다.

프로젝트 폴더안의 postcss.config.js 파일
아마 원래는

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

으로 되어 있을 것이다.
위의 tailwindcss을 '@tailwindcss/postcss'으로 변경한다.
autoprefixer도 삭제한다.
(autoprefixer는 삭제 안해도 작동은 하지만 있어도 아무런 변화가 없다)

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Promise 에러

Error: Route "/" used searchParams.tag. searchParams should be awaited before using its properties.

Next.js가 업데이트한 뒤로
params, searchParams 은 promise이라고 한다.
사용하기 전에 await를 해야 한다.

나는 거의 모든 페이지에서
params을 사용하기 때문에
꽤나 귀찮았다...
하지만 어려운 수정은 아니다.

// 원래 코드
export default function Example({ params }) {
  const id = params.id
  const locale = params.locale
  // { ...기타 코드 }
}

// 변경 후 코드
export default async function Example({ params }) {
  const { id, locale } = await params
  // { ...기타 코드 }
}

위처럼

• 컴포넌트 function 앞 async추가
• params 는 await로 읽기

Tailwind 작동 안함

또 하나의 문제는
Tailwind가 아예 작동을 하지 않는다.
즉 스타일 css가 모두 없는 형태이다.

global.css는 적용되고
별도 에러 문구도 없기 때문에
분명히 설정의 문제이다.

공문을 보기로 했다. Tailwind - Next.js에서 사용법 : (https://tailwindcss.com/docs/installation/framework-guides/nextjs)

문제점은 global.css에 있었다.

/* 원래 코드 최상단  */
@tailwind base;
@tailwind components;
@tailwind utilities;

옛날에 tailwind를 적용하는 방법이었다.
하지만 이제는 더 이상 사용하지 않는다.

/* 수정 후 코드 최상단  */
@import 'tailwindcss';

이저는 "tailwindcss"을 import 한줄로 사용한다.

Tailwind 다크모드 작동 안함

디자인은 돌아왔지만,
다크모드가 작동하지 않는다.

다시 공문을 찾았다...
Tailwind - darkmode 설명 : https://tailwindcss.com/docs/dark-mode

이 또한 global.css에
import가 필요하게 변경되었다.

/* global.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

typography 작동 안함

내 블로그는
markdown을 읽는 방식으로,
typography의 style을 사용하고 있다.

이 또한 설정법이 변경되었다.
공문 : https://github.com/tailwindlabs/tailwindcss-typography

결론은 global.css에 추가해야 한다.

/* global.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@plugin "@tailwindcss/typography";

typography 커스텀 작동 안함

tailwind.config.js 파일에
커스텀했던 내용이 있는데 적용이 안된다.

같은 공문의
"Adding custom color themes"부분
설정법이 나온다.
동일하게 global.css에 문구를 추가한다.

/* global.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@plugin "@tailwindcss/typography";
@config "../../tailwind.config.js";

나의 경우 global.css의 위치가
./src/app/global.css 이기 때문에
../../tailwind.config.js을 사용했다.

Tailwind border 색상

이건 에러가 아니라
업데이트된 다음 디폴트 색삭이 변했다.
옛날에는 회색 gray-300 정도이었는데,
이제는 그냥 black인 것 같다.

hr태그나 border가 있고
색상이 마음에 안들면 수정이 필요하다.

그 외의 개인적인 느낌이어서
확실하지는 않지만,
shadow 모양 및 크기도 변경된 느낌이다.

마치면서

문제를 찾고,
공문을 찾고,
수정할게 많아서
시간은 좀 걸렸지만,
다행히 어렵지 않게 해결했다.

진행한 내용을 요약하면

• node.js 업데이트
• 패키지 업데이트 리스트 확인
• npm 업데이트
• npm-check-update 설치
• npm-check-update 실행 package.json 수정
• npm intall로 패키지 다시 설치

여기까지 업데이트 내용

• @tailwindcss/postcss 설치
• postcss.config.js 수정
• global.css '@tailwind base' 삭제
• global.css '@tailwind components' 삭제
• global.css '@tailwind utilities' 삭제
• global.css '@import "tailwindcss"' 추가 >> tailwind 적용
• global.css '@custom-variant dark (&:where(.dark, .dark *))' 추가 >> 다크모드 적용
• global.css '@plugin "@tailwindcss/typography"' 추가 >> typography 적용
• global.css '@plugin "@config "../../tailwind.config.js"' 추가 >> 커스텀 적용

그리고 tailwind의
border와 shadow 디폴트 변경으로,
일부 스타일을 수정했다.

여기까지가 tailwind 수정 내용

그리고 각 페이지의 params과 searchParams을 await로 읽기.
이렇게 업데이트 및 수정을 완료했다.

중간에 문제점을 찾을 때,
혹시하는 마음에 캐시, 아티팩트를 삭제했다.

# 캐시 강제 삭제
npm cache clean --force
# 이전 모듈 삭제
rm -rf node_modules .next package-lock.json
# 모듈 다시 설치
npm install

Tailwind는 변경점이 꽤 많다고 한다.
공문 참고 : https://tailwindcss.com/docs/upgrade-guide

나는 사용해보지 못했지만
공문에서는

npx @tailwindcss/upgrade

을 사용해서 업데이트를 권장한다.