[Next.js] TypeError: Unexpected MODIFIER at 0, expected END

TypeError: Unexpected MODIFIER at 0, expected END

Next.js 프레임워크를 사용하여 개발 또는 프로덕션 서버를 시작할 때 다음과 같이 에러가 발생하며 진행되지 않는 경우가 있습니다.

TypeError: Unexpected MODIFIER at 0, expected END
     at mustConsume (C:\MyProject\client\node_modules\path-to-regexp\dist\index.js:113:15)
     at parse (C:\MyProject\client\node_modules\path-to-regexp\dist\index.js:172:9)
     at stringToRegexp (C:\MyProject\client\node_modules\path-to-regexp\dist\index.js:329:27)
     at pathToRegexp (C:\MyProject\client\node_modules\path-to-regexp\dist\index.js:403:12)
     at new Layer (C:\MyProject\client\node_modules\koa-router\lib\layer.js:43:17)
     at Router.register (C:\MyProject\client\node_modules\koa-router\lib\router.js:570:17)
     at Router.<computed> [as get] (C:\MyProject\client\node_modules\koa-router\lib\router.js:200:12)
     at C:\MyProject\client\client-server\index.js:73:14
     at async C:\MyProject\client\client-server\index.js:19:5

해결 방법

기존의 Next.js 버전이 9로 업그레이드 되면서 라우터 경로 규칙이 변경되었습니다.

기존에 사용되던 전체 경로 해석을 위한 문자가 * 이었다면 이를 (.*) 또는 :splat* 으로 변경해야 합니다.

예를 들어 다음과 같이 되어 있는 코드가 있다면,

router.get('*', async ctx => {
    await handler(ctx.req, ctx.res);
    ctx.respond = false;
});

변경 후에는 다음과 같이 되어야 합니다.

router.get('(.*)', async ctx => {
    await handler(ctx.req, ctx.res);
    ctx.respond = false;
});

참고 자료

• https://github.com/vercel/next.js/issues/9705
• https://github.com/koajs/router/blob/master/history.md