안녕하세요 !!
이번엔 Next JS의 _app.js, _document.js이 뭔지 !! 어떻게 사용하면 좋은지에 대해서 설명하려고 합니다 !!
Next JS 를 사용함에 있어서 엄청 중요한 부분이니 꼭 이해해봅시다 !
_app.js란?
Next.js에서는 App구성 요소를 사용하여 모든 페이지를 초기화합니다.
따라서 !! _app.js(tsx)을 만들어 기본 App 구성 요소를 덮어 쓸 수 있습니다 !!
즉, 모든 페이지에서 필요한 처리를 여기에 쓸 수 있습니다 !! ( 핵심은 모든 페이지에서 공통으로 사용함 )
그 밖에도 App 컴포넌트에서는 다음과 같은 것을 할 수 있습니다
- 페이지 간의 공통 레이아웃을 가질 수 있습니다.
- 공통 상태를 가질 수 있음(Store를 설정해두면 좋습니다)
- 글로벌 CSS (모든 페이지 공통)를 정의 할 수 있습니다.
- 각 Route 구성 요소를 래핑하는 것
- Redux Provider 설정하기
그럼 한번 모든 페이지에서 공통으로 사용하는지 테스트를 해봐야겠죠?
먼저 _app.tsx의 코드를 봐보겠습니다.
import '../../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<div>
어디서든 나오나요 ?
<br />
<Component {...pageProps} />
</div>
)
}
export default MyApp
위에서 처럼 어떤 page에서든지 불러 올 수 있게 됐습니다 !
그래서? 어디다 써먹어??
라고도 하실수도 있는데요 !!! 뭐냐하면 바로 ! 헤더부분이라던지 네비게이션 부분이라던지 ! 풋터부분이라던지 ! 공틍으로 사용하는것들을 넣어주시고 ! 또한 페이지 전체에 적용하고싶은 공통 css를 적용하면 편합니다 !!
위에 소스코드에서도 나와있듯이 global.css가 있는데요 ! 저 안에 일부를 좀 살펴보면
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}위에처럼 작성됐습니다 !! 즉 페이지 전체에 html, body이라던지 li라던지 !!!
다양하게 사용 할 수 있습니다 ^^
또한 !! 리덕스를 사용하시는 분들은 Provider도 적용하시면 좋습니다 !
function MyApp({ Component, pageProps }: AppProps) {
return (
<div>
어디서든 나오나요 ?
<br />
<Provider store={store}>
<DefaultLayout>
<Component {...pageProps} />
</DefaultLayout>
</Provider>
</div>
)
}위에처럼 말이죠 !! Provider를 처음에 적용시키기도 하고 ! 처음에 기본적으로 뿌려줄 레이아웃같은것을 불러와주면 좋겠죠???
아 ! 참고로 Provider는 react-redux 라이브러리에 내장되어있는 리액트 앱에 store를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트입니다 ! 일단 이정도만 알아두세요 !
_document.js란
Next.js의 Page 컴포넌트는 기본적으로 <html> · <body> 태그를 정의 _documet.js(tsx)합니다 Document.
_document.js(tsx)그러면 , <Html>, <Head />, <Main />이 <NextScript />페이지가 제대로 렌더링되기 위해 필요합니다.
또 주의 해야 할 것들이 있습니다 !
- **SSR(**서버 사이드 렌더링)만의 실행이므로, 클라이언트측의 처리를 써서는 안됩니다. ← 실수하기 때문에 주의!
- Document는 서버에서만 렌더링되며, onClick같은 이벤트 핸들러는 작동하지 않습니다.
- <Main />안에 들어가는 외부 React 컴포넌트는 브라우저에 의해 초기화되지 않기 때문에 여기에서 애플리케이션의 로직이나 styled-jsx, <title>, CSS를 설정해서는 안됩니다!!!!! 모든 페이지의 컴포넌트에 공통하고 싶은 경우는 대신에 App컴퍼넌트를 사용해 주세요( _app.js(tsx)에 정의)
- Document클라이언트 측 getInitialProps전환 중에는 호출되지 않으며 페이지가 정적으로 최적화 된 경우에도 호출되지 않습니다.
기본적인 모습은 밑에 코드와 같습니다 ! ( 또한 파일 위치는 pages / _document.js )
참고로 밑에는 _document.tsx의 모습입니다 !
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;혹시라도 아래와 같은 에러가 나시는 분들은 !!
.eslintrc.json 여기 파일에서 밑에와 같이 추가를 해주세요 !
"rules": {
"@next/next/no-document-import-in-page": "off"
}그러면 에러가 없어질겁니다 !!
계속해서 !!
뭐 별거없는데? 라고 하실수도 있습니다 !
그러면 어떻게 활용하면 유용하게 사용 할 수 있을까요??
여러분들도 눈치채셨을거라고 믿습니다 !!
html、head、body....같은것들이 있으니 이에 맞는 태그들을 써주는겁니다 !!
<Html lang="en">위와 같이 추가를 해주거나 !
이렇게 폰트를 넣어줄수도 있습니다 !!
Next.js에서는 Document, App 컴포넌트를 이용하여 페이지간의 공통 처리나 공통 레이아웃을 정의할 수 있습니다!
Next.js를 실천에서 사용하는 첫걸음으로 _app.js와 _document.js를 다루었습니다.
이것들을 추가하면 공통으로 처리해야 할 것들을 모아서 써줄 수 있으니 편리하게 사용 할 수 있습니다 !!
마지막으로 ! document에서 title이나 공통으로 쓸 css를 넣는 실수는 하지맙시다 ^^
또한 저는 document에서 IE에서 저의 웹에 들어가면 redirect하는 것도 만들어봤는데요 !
나중에 소개해보겠습니다 !!!
'IT관련 > NextJS' 카테고리의 다른 글
| Next js에서는 a태그대신에 Link태그를 사용하자 ! (0) | 2022.05.19 |
|---|---|
| document is not defined 에러가 뭐야? 해결법 !! (feat. window is not defined) (0) | 2022.04.12 |
| Next JS가 풀스택이 가능한이유 ! (feat. api, prisma, planetscale) (0) | 2022.03.29 |
| Next JS의 기본과 디렉토리의 구조에 대해서 알아보자 ! (feat. pages folder, public folder) (0) | 2022.03.16 |
