Next를 이용한 쇼핑몰 만들기가 어느정도 완성 하였지만, 구체적인 디자인 구체적으로 해야하는 것들이 까다로워 새롭게 만드는 BolierPlate입니다.
Next를 사용하여서 BolierPlate를 만들 것입니다.
- npx create-next-app
Next를 생성하면, 아래와 같은 폴더구조가 생깁니다.
여기에서 pages 폴더 에서 이것 저것을 할 것입니다.
_app.js생성 및 설정하기
: 모든 next의 router에 해당하는 것들을 설정(?) 즉, 공통부분에 대한 파일 입니다.
const booilerPlate = ({Component, pageProps}) => {
return (
<div>
<Head>
<meta charSet="utf-8"></meta>
<title>Woong'S-page</title>
</Head>
<Component {...pageProps}/>
</div>
)
}
export default booilerPlate;<head>는 html에서 처럼, head공통 부분을 넣으면 됩니다
Components는, pages 폴더 안에 있는 모든 component를 뜻 합니다.
라우터를 옮겨가며 그에 맞는 component를 보여주는 것 같음.
pageProps 는, 각 컴포넌트가 받는 Props를 의미합니다.
예)
- localhost:3000
- /home
- _app.js 실행
- _app.js 안에서 home.js 를 불러와 실행
이런 순서로 pages 폴더가 실행됩니다.
DFF (Development For Fun)