-
Next.js - 초기화 이후 기본 구조 설정하기React.js & Next.js 2022. 9. 18. 20:15
구성 요소
📁 pages 폴더 안에는 넥스트에서 중요한 역할을 하는 특별한 파일들이 있습니다.
- 📙 _app.jsx (tsx)
- 📙 _document.jsx (tsx)
- 📙 _error.jsx (tsx)
- 📙 404.jsx (tsx)
📙_app.jsx
- App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다.
- App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다.
- 페이지들의 공통된 레이아웃
- 페이지를 탐색할 때 상태 유지
- 추가 데이터를 페이지에 주입
- 글로벌 CSS 추가
📁 pages/_app.jsx import Header from '../components/Header'; const MyApp = ({ Component, pageProps }) => { return ( <> <Header /> <Component {...pageProps} /> <style jsx global> {` body { margin: 0; } `} </style> </> ); }; export default MyApp;📙_document.jsx
사용자 정의 Document는 일반적으로 응용 프로그램 <HTML> 및 <body> 태그를 보강하는데 사용됩니다. 도큐먼트를 이용하여 <title>, <description>, <meta> 등 프로젝트의 정보를 제공하는 HTML 코드를 작성할 수 있고, 폰트나 외부 api, cdn 등을 불러오도록 할 수 있습니다. 또한 CSS-in-JS의 서버 사이드 렌더링을 위한 설정을 할 때 사용합니다. Head 태그에 meta 태그를 추가하여 해당 프로젝트에 대한 정보를 추가할 수 있고, 구글 폰트 등에서 제공하는 폰트를 link 로 불러와 전역으로 적용시킬 수 있습니다.
📁 pages/_document.jsx import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( <Html lang="ko"> <Head> <meta name="title" content="깃허브 레포지토리" /> <meta name="description" content="깃허브 레퍼지토리 리스트입니다" /> <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700&display=swap&subset=korean" rel="stylesheet" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;📙_error.jsx
넥스트에서는 빌드 된 프로덕션 환경에서 에러가 발생한다면 에러 페이지로 넘어가게 됩니다. 따로 라우팅 경로를 설정하지 않더라도, 빌드 된 프로덕트 환경에서 에러가 발생한다면 에러 페이지로 자동적으로 넘어갑니다. 추가적으로 에러 상황에 따라서 500, 404 등도 추가할 수 있습니다
📁 pages/_error.jsx const Error = () => { return ( <div> <p>에러가 발생했습니다</p> </div> ); }; export default Error;'React.js & Next.js' 카테고리의 다른 글
Next.js - SSG, getStaticProps (0) 2022.09.18 Next.js - SSR, getServerSideProps 적용하기 (0) 2022.09.18 리액트에서 다수의 체크 박스 다루기 (0) 2022.09.13 스타일드 컴포넌트 조건부 렌더링 활용하기 (0) 2022.08.26 자바스크립트 프로젝트에 타입스크립트 도입하기 (0) 2022.08.24