src 폴더
- 해당 폴더를 꼭 사용할 필요는 없습니다. 대신, 루트에 pages 폴더 생성하면 src/pages 폴더는 무시 됩니다.
- next.config.js, tsconfig.json, environment variables 등과 같은 config 파일은 루트 디렉토리에 반드시 위치해야합니다. src 폴더로 이동하면 작동하지 않습니다.
- 공식문서
Custom App & Custom Document
_app
- 서버로 요청시 해당 컴포넌트가 가장 먼저 실행되는 컴포넌트 입니다.
- 모든 페이지(컴포넌트)가 해당 컴포넌트를 통해 실행되므로 공통 레이아웃을 적용할 수 있습니다.
- 글로벌 css 적용할 수 있습니다.
- 페이지 전환시 특정 레이아웃을 상태값을 유지할 수 있습니다.
- getStaticProps, getServerSideProps 데이터 페칭 메서드는 해당 컴포넌트에서는 사용할 수 없습니다.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
// Component prop은 현재 활성화된 페이지 입니다.
// 페이지를 라우팅할 때마다 Component prop은 새로운 페이지로 변경됩니다.
// pageProps 초기 props를 포함한 객체입니다.- 공식문서
_document
- _app.tsx 컴포넌트 다음에 실행되는 컴포넌트 입니다.
- NextJS에서 제공하는 document(html, body 태그)를 커스터마이징 할 수 있습니다.
- 서버에서만 실행되는 파일이기 때문에 브라우저 API, 이벤트 핸들러 등이 포함된 코드는 실행되지 않습니다.
- _document 의 Head 컴포넌트는 next/head 모듈 내의 Head 컴포넌트와 다릅니다. next/document 모듈에서 가져오기 하여 사용합니다. _document 에서 사용되는 <Head /> 컴포넌트는 모든 페이지에 공통으로 적용해야할 정보들을 포함합니다. 반면, <title /> 과 같이 페이지 별로 다르게 작성되어야 하는 부분은 next/head 모듈에서 가져오기 하여 page 내에서 사용합니다.
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}- 공식문서
pages 폴더
- pages 폴더 내에 있는 파일은 파일 이름을 기반으로 라우팅을 설정할 수 있습니다.
- 예를 들어 pages/about.js 파일을 만든다면 /about 에서 해당 컴포넌트에 접근할 수 있습니다.
- 공식문서
public 폴더
- 정적파일(이미지 등)을 사용하는 폴더 입니다.
- `base URL/파일이름`의 형태의 경로를 통해 public 폴더에 있는 파일을 참조할 수 있습니다.
- robots.txt, favicon.ico, GSV 등의 정적 파일을 사용하는데 유용합니다.
- 폴더 내 파일 이름을 동일하게 설정하지 않도록 유의합니다.
- 빌드타임에 public 폴더에 포함된 파일만 사용가능하고 런타임에 추가되는 파일은 사용 불가합니다.
- 공식문서
next.config.js
- 커스텀 설정을 위해 루트 디렉토리에 해당 파일을 생성합니다.
- JSON 파일이 아닌 Node.js 모듈 입니다.
- 빌드시에만 NextJS 서버에 의해 사용됩니다.
// next.config.js
module.exports = {
reactStrictMode: true,
swcMinify: true,
compiler: {
styledComponents: true,
removeConsole: false,
},
env: {
customKey: 'my-value',
},
}
/**
swcMinify
Terse와 비슷한 역할을 하는 빌드 툴입니다. 불필요한 공백과 주석을 삭제하여 공백을 줄이고
스크립트를 해석할 수 없도록 암호화 하는 역할을 합니다.
빌드타임을 획기적으로 줄여줍니다.
참고: https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/
*/
/**
compiler
styledComponent
NextJS와 styled-components 함께 사용시babel-plugin-styled-components 설치 후
ssr 설정을 해주어야 하는데 이와같이 간단하게 한줄로 설정해 줄 수 있습니다.
removeConsole
소스코드에서 console.* 를 제거합니다.
참고: https://nextjs.org/docs/advanced-features/compiler
*/
/**
env
클라이언트에서 환경변수를 사용하기 위해 NEXT_PUBLIC를 붙여 사용해야하지만
next.config.js 파일에 설정하면 process.env.customKey 와 같은 형태로 접근 가능합니다.
*/- 공식문서
'FRONTEND' 카테고리의 다른 글
| [NextJS] 공식문서 읽어보기 Learn - How Next.js Works - part.2 (0) | 2023.04.23 |
|---|---|
| [NextJS] 공식문서 읽어보기 Learn - How Next.js Works - part.1 (0) | 2023.04.21 |
| [NextJS] Next.js 초기 세팅 테스트 (0) | 2023.04.03 |
| [Storybook] Storybook에 대해서 (0) | 2023.03.30 |
| [Storybook] Storybook 설명 (0) | 2023.03.29 |
