_app.js
next.js에서 모든 것은 _app.js 이 파일을 통한다.
0. 가장 큰 전체적인 레이아웃을 여기서 잡는다.
1. 페이지 전환 시, 레이아웃을 유지할 수 있음
2. 페이지 전환 시, 상태값을 유지할 수 있음
3. componentDidCatch라는 것을 이용하여 커스텀 에러 핸들링 가능.
4. 추가적인 데이터를 페이지로 주입할 수 있음
5. 글로벌 css(모든 페이지에 다 쓸 css)를 여기에 선언한다.
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}위에서 props로 전달되는 것 중, 'Component'는 현재 전달된 페이지다. 그래서 페이지가 바뀔 때마다 이 'Component'도 바뀐다. 'pageProps'는 가져오는 데이터와 관련이 있는데 이건 나중에...
맨 처음 시작하기
1. header, footer 같은 컴포넌트를 만든다고 하자.
2. 폴더는 ./src/component/Header.js 또는 Footer.js
3. 이 컴포넌트를 _app.js에 추가한다.
_document.js 파일도 있는데, 여기서는 html 태그에 lang 같은 속성을 설정하고 싶을 때 사용한다. 이 파일에서 css 스타일링이나 onClick 같은 이벤트는 사용하지 않는다.
next.js에서 제일 좋은건 라우팅 시스템.
3rd party 라우터도 필요없고 'pages'폴더에 파일을 넣으면 된다
pages 폴더에 about.js 파일이 있으면 /about 이렇게 접근할 수 있다.
그리고 '페이지 소스보기'를 하면 컨텐츠가 다 보인다. 사람에게도 보인다면 웹 크롤러에게도 보인다. 리액트로만 이루어진 페이지에다가 '페이지 소스보기'를 하면 아래 캡쳐처럼 컨텐츠 대신 이상한(?) 내용만 보인다. 이래서 next.js를 사용하면 seo에 좋다고 하는거구나 싶다.
naming convention은 pages 폴더 내의 파일들은 소문자로 시작하고(about.js처럼) 컴포넌트 파일들은 대문자로 시작한다(Box.js처럼)
