[error] 블로그를 만들며 겪은 에러들

nextjs로 블로그를 만드는 과정에서 겪은 에러들을 기록했습니다

Mar 11, 2024・2 min read

production에서 tailwind가 동작하지 않는 것 같아요!

localfont를 tailwind를 이용해서 적용했는데 분명 dev 모드에서는 잘만 적용되었던 폰트가 정작 production 에서는 제대로 적용되지 않은 것을 확인했다!

참고 Tailwind Not Working in Production Mode with Next.js Build 위의 github discussion을 통해 답을 구했다.

여러 해결방법이 있었는데, 아무래도 이전에 module.css를 통해 구현한 부분이(이후엔 전부 tailwind로 수정할 예정이지만) override를 통해 영향을 미친다고 생각이 들어서 이 방법이 맞다고 생각했다.

결과

production에서도 font가 잘 적용된 것을 확인할 수 있다.

ts:contentlayer.config.ts

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'blog/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
    tags: { type: 'list', of: { type: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
    slug: {
      type: 'string',
      resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\/)/, ''),
    }
    ...
  },
}))