White Been's Dev House

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

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

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

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

[NextJS] config 파일 및 폴더

src 폴더

Custom App & Custom Document

_app

_document

pages 폴더

public 폴더

next.config.js

'FRONTEND' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	export default function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />
	}

	// Component prop은 현재 활성화된 페이지 입니다.
	// 페이지를 라우팅할 때마다 Component prop은 새로운 페이지로 변경됩니다.

	// pageProps 초기 props를 포함한 객체입니다.

	import { Html, Head, Main, NextScript } from 'next/document'

	export default function Document() {
	return (
	<Html>
	<Head />
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	)
	}

	// 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 와 같은 형태로 접근 가능합니다.

	*/

[NextJS] config 파일 및 폴더

src 폴더

Custom App & Custom Document

_app

_document

pages 폴더

public 폴더

next.config.js

'FRONTEND' 카테고리의 다른 글

'FRONTEND' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역