next.js 기본구조

📁pages → HTML Document, Application Container, 각종 페이지 등을 작성한다. ㄴ**_document.js** HTML Document. ㄴ**_app.js** Application Container. 공통의 레이아웃을 작성한다. ㄴ**_error.js** Error Page. ㄴindex.js Root Page /로 시작되는 경로를 말한다. ㄴhello.js Hello Page /hello로 시작되는 경로를 말한다.

📁static 정적 파일 (이미지, 파일 등)을 업로드 한다. next.config.js Next.js의 환경 설정 파일이다. 라우팅 설정, typescript, less 등의 webpack 플러그인을 설정한다.

REACT쓸때와 차이점?

React 개발이 이렇게 쉬웠나? (Feat. Next.js)

• 파일기반 라우팅 제공:page폴더에 컴포넌트 파일만들면 자동 라우팅 된다. 라우터 안써도됨 바로 파일명 url쳐서 들어갈 수 있다.
• 튜토리얼들 보니까 module.css를 쓴다. 왜지? → 찾아보니 styled components쓰려면 따로 세팅을 추가적으로 몇개 해줘야함 sass 등 다 쓸수 있음

Next.js에서 styled-components 사용하기

• global css import가 _app.js에서만 가능
• 이미지 최적화 기능 없어서 라이브러리 필요 'next-optimized-images'

Next.js는 기본적으로 SSG 방식을 추천한다. SSG는 미리 서버의 데이터를 가져와서 파일로 만들어놓고 뿌려주는? 방식.

SSR도 가능한데 SSG가 더 빠름.

SSR은 서버에서 데이터를 변동시켰으 ㄹ때 바로 반영이 되는데, SSG는 시간이 걸릴 수 있음 - 시간 설정할 수 있다. 내가 본 튜토리얼에선 20초로 했었음., 굳이 실시간으로 반영될 필요가 없다면 SSG쓰는게 좋음.

라우팅

정적라우팅

 <Link href="/about"><a style={{ fontSize: 20 }}>About Page</a></Link>