Next.js Beta Docs 번역

[next.config.js Options] pageExtensions

2023. 5. 9. 21:03

https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions

 

next.config.js Options: pageExtensions | Next.js

By default, Next.js accepts files with the following extensions: .tsx, .ts, .jsx, .js. This can be modified to allow other extensions like markdown (.md, .mdx). For custom advanced configuration of Next.js, you can create a next.config.js or next.config.mj

nextjs.org

위 문서에 대한 번역을 진행합니다.

번역시점은 05-09로 공식문서의 추가적인 업데이트가 있을 수 있습니다.

DeepL translator와 ChatGPT에 의존해서 번역하고 있습니다.

번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.

이에 대한 피드백은 댓글로 알려주시면 감사하겠습니다.

한글로 번역하는 것이 더 어색한 경우 원문을 먼저 표기하겠습니다.

한글로 번역하는 것이 더 어색한 경우 원문을 먼저 표기하겠습니다.


기본적으로 Next.js는 확장자가. tsx,. ts,. jsx,. js인 파일을 허용합니다. 마크다운(. md,. mdx)과 같은 다른 확장자를 허용하도록 수정할 수 있습니다.

const withMDX = require('@next/mdx')();
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'mdx'],
  experimental: {
    mdxRs: true,
  },
};
 
module.exports = withMDX(nextConfig);

Next.js의 고급 사용자 정의 설정을 위해 프로젝트 디렉토리의 루트 (package.json 옆)에 next.config.js 또는 next.config.mjs 파일을 생성할 수 있습니다. 

 

next.config.js는 JSON 파일이 아닌 일반적인 Node.js 모듈입니다. Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에 포함되지 않습니다. 

 

다음은 next.config.js 예제입니다.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
};
 
module.exports = nextConfig;

만약 ECMAScript 모듈이 필요하다면, next.config.mjs를 사용할 수 있습니다:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
};
 
export default nextConfig;

또한 함수를 사용할 수 있습니다.

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  };
  return nextConfig;
};

Next.js 12.1.0부터 async함수를 사용할 수 있습니다:

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  };
  return nextConfig;
};

phase은 구성이 로드되는 현재 컨텍스트입니다. 사용 가능한 단계를 확인할 수 있습니다. 단계는 next/constants에서 가져올 수 있습니다.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
 
module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    };
  }
 
  return {
    /* config options for all phases except development here */
  };
};

주석 처리된 줄은 next.config.js에서 정의된 구성을 입력할 수 있는 위치입니다. 하지만 이러한 구성 중 어떤 것도 필수는 아니며, 각 구성이 무엇을 하는지 이해할 필요도 없습니다. 대신 이 섹션에서 활성화하거나 수정해야 할 기능을 검색하고, 해당 기능에 대한 지침을 찾아보세요.

 

대상 Node.js 버전에서 사용할 수 없는 새로운 JavaScript 기능을 사용하지 마세요. next.config.js는 Webpack, Babel 또는 TypeScript에서 구문 분석되지 않습니다.

'Next.js Beta Docs 번역' 카테고리의 다른 글

[next.config.js Options] reactStrictMode  (0) 2023.05.24
[next.config.js Options] productionBrowserSourceMaps  (0) 2023.05.10
[next.config.js Options] poweredByHeader  (0) 2023.05.10
'Next.js Beta Docs 번역' 카테고리의 다른 글
  • [next.config.js Options] reactStrictMode
  • [next.config.js Options] productionBrowserSourceMaps
  • [next.config.js Options] poweredByHeader
Summer.dev
Summer.dev
프론트엔드 개발자 Summer 입니다! 피드백은 언제나 환영입니다.
Summer.dev
꾸준함이 무기
Summer.dev
전체
오늘
어제
  • 분류 전체보기
    • Projects
      • Next.js board-project
      • MOMO
    • 원티드
    • 우테코 프리코스
    • JavaScript
    • React
    • TypeScript
    • Node.js
    • Algorithm
      • 코플릿
      • 개념정리
    • 네트워크
    • 오류해결
    • 회고
    • 기술면접준비
    • git,github
    • 소소하게 궁금한것
    • Next.js Beta Docs 번역
    • 디자인패턴
    • 트러블슈팅
    • 번역

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 메모이제이션
  • 알고리즘

최근 댓글

최근 글

hELLO · Designed By 정상우.
Summer.dev
[next.config.js Options] pageExtensions
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.