[NexJS] 모든 페이지에 대한 공통 레이아웃과 스타일을 설정해보자! (feat. _app.js)

반응형

 

 

소스 코드 보러가기 👉🏻 https://github.com/gitchan-Study/2023-next-js-beginner

GitHub - gitchan-Study/2023-next-js-beginner: 노마드코더 [NextJS 시작하기] 학습 코드

 

 

 

💋 _app.js

_app.js는 애플리케이션의 전역 설정을 담당하는 파일이다.

pages/_app.js를 생성한다. 이때 이름은 프레임워크 내 약속된 이름이기 때문에 언더바를 포함해서 제대로 적어주어야만 NextJS가 다른 페이지를 렌더링하기 전에 이 파일을 확인한다.

 

pages/_app.js

import NavBar from "@/components/NavBar";

export default function App({Component, pageProps}) {
	return <>
		<NavBar/>
		<Component {...pageProps}/>
		<style jsx global>{`
		  a {
			color: white;
		  }

		  h1 {
			background-color: tomato;
		  }
		`}</style>
	</>
};

 

pages 디렉토리 아래에 속한 모든 페이지들의 Component는 이제 렌더링되기 전에 App의 Component 자리에 한 번씩 들어간 후의 형태로 렌더링된다.

이제 global css 파일은 _app.js 파일에서만 import 가능하고, 나머지 페이지들은 모두 module css만 적용할 수 있게 된다.

 

pages/index.js

export default function Home() {
	return (
		<div>
			<h1>Hello</h1>
		</div>
	);
}

 

pages/about.js

export default function About() {
	return (
		<div>
			<h1>About</h1>
		</div>
	);
};

 

이렇게 하면, _app.js에 작성한 내용이 전역적으로 모든 곳에 적용된다.

이제, NavBar를 모든 페이지마다 복붙하지 않아도 되기 때문에, 중복 코드를 방지하고 유지보수성을 향상시킬 수 있다.

 

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!