[FE] next.config.js 는 typescript를 못 읽는다

 

기존 프로젝트에서 없어진 페이지들에 대한 redirect가 각각의 페이지에 박혀있는것을 확인했다.

이렇게 되면 없어졌던 페이지더라도 해당 page 쪽 파일을 삭제하지 못하고 계속 유지해야만 한다. (그런 페이지들이 꽤나 있었다)

그래서 리다이렉트 관련된 부분들을 next.config.js 에서 한번에 관리하고자 했다.

 

그래서 아래같이 내용을 추가하고 리다이렉트 내용들은 길어질것을 대비해서 다른 파일에 작성했다.

// next.config.js
async redirects() {
  return REDIRECTS;
},

// ...redirect.ts
export const redirect = [
   ...
]

 

아주 깔-끔하구만 하면서 재가동 시켰다. (config 파일은 다시 시작해야만 적용된다..!)

그런데..? redirect.ts 파일을 제대로 읽지 못하고  "...SyntaxError: Unexpected token 'export'..." 하는 에러가 발생했다.

 

 

next.config.js 는 next 위에서 동작하지 않는다. node 환경에서 이 어플리케이션이 어떻게 돌아갈지의 대한 세팅을 먼저 진행한다.

이 이후에 babel 이 돌면서 import, export 등의 ESM 문법을 처리한다.

이에 이전 단계인 config 파일이 실행될때는 import, export 이런 문법을 읽을 수가 없다. 또한 타입스크립트도 읽을 수 없기에 .ts 확장자로 된 파일을 읽지 못한다.

그렇기에 config 파일에 정상적으로 적용하기 위해서는 common JS 로 변환해서 사용해줘야 한다.

 

// next.config.js
const REDIRECTS = require("./src/constants/redirects");

// redirect.js
const REDIRECTS = [
  ...
]
module.exports = REDIRECTS;

 

이렇게 변경해주면 이제 원하는대로 에러없이 config 파일을 적용시킬 수 있다..!