NEXT.js가 알아서 해주는 것들
- webpack bundling & babel transfiling
- code spliting : 현재 필요한 페이지 파일과 로직 파일만 로딩해온다. 로딩시간을 단축할 수 있고, 특정 파일에 에러가 있어도 그 외의 파일은 에러와 상관없이 사용 가능하게 된다.
- pre-fetching : Link태그와 감싸진 부분과 같이 다음에 필요할 수도 있는 파일을 미리 로딩해온다.
라우팅이 그냥되네?
Create a New Page
pages폴더안에 폴더 및 파일 경로를 설정하면 해당 path가 URL path가 된다.
별도의 라우팅 라이브러리 설치 및 설정없이 바로 이동할 수 있다.
pages/posts/first-post => http://localhost:3000/posts/first-post.
client-side navigation: Link 와 a 태그로 페이지 이동하기
- React에서와 마찬가지로 a 태그를 사용하여 다른 페이지로 라우팅을 하면 화면이 깜빡이며 새로고침 되어버린다.
- Link 태그를 사용해서 페이지의 이동없이 한 페이지내에서 라우팅 해준다.
- 배경색을 바꾸고 Link태그를 눌렀을 때 배경색이 유지되었고, a태그만을 사용했을 때에는 배경색이 refresh되면서 페이지가 새로고쳐짐을 확인 할 수 있었다.
- 또한, 코드 스플릿팅이 Next에서 자동으로 해준다고 했는데, 이 Link태그를 사용하면 현재 보고있는 페이지에서 Link태그에서 필요로 하는 페이지를 미리 로드해와 Link태그로 이동했을 때 빠르게 페이지를 바꿔 보여줄 수 있게 된다. (
prefetching) <Link><a>페이지이동</a></Link>와 같이 Link 태그 내에 a 태그를 사용하라고 했는데, 사실 a 태그가 없다고해서 라우팅이 안되지는 않는다. 아무래도 SEO를 고려해서 a태그를 써주라고 한 것일까?- 다만, 앱 내에서 만든 페이지가 아닌 외부 페이지를 이동할 때는
Link태그가 아닌a태그만으로 이동시킨다. (사실 상 새로운 페이지니까!, 또 Link 태그쓰면 에러가 난다.)
Styling
스타일링 방법에는 CSS Modules, Sass, styled-jsx 방법이 내장되어 있어 바로 사용할 수 있고 styled-components나 다른 라이브러리는 설치가 필요하다.
일부 기본 태그(Image와 같은..)가 styled-components처럼 만들어져 있어 크게 예전 리액트 방식보다 사용빈도는 좀 줄 듯하다.
- 스타일 모듈화
CSS Modules로 css 파일을 import 하고
스타일을 지정해줄 곳에 classname으로 반영한다.
컴포넌트 레벨에서 스코프가 생성되기 때문에 이름이 겹칠 것을 걱정하지 않고 사용할 수 있어 유용하다.
🌱 CSS file 이름은 xx.module.css으로 끝나야 한다.
-
Unique Class Names 자동생성
모듈 파일에서.container라는 클래스 네임을 사용했는데
알아서 이렇게 변환해준다. 클래스명이 겹칠 걱정할 필요가 없게 된다.
-
GlobalStyles
pages/_app.js에서만GlobalStyles를 가져올 수 있다.
최상위 App 컴포넌트로서 공통 상태를 공유, 유지할 수 있다.
이를 활용해GlobalStyles를 적용한다. 전역 스타일이 필요한 곳에서 import할 필요가 없어진다. 다른 외부에서 import를 시도하면 전역CSS가 페이지 모든 요소에 영향을 주기 때문에 에러가 발생함
기타
Assets 관리
<Img>태그 : image resizing & optimizing
리액트에서 Img라는 이름으로 스타일 컴포넌트 만들고 커스텀 prop넘긴 느낌이다.
Metadata
- 페이지가 라우팅 될 때도 브라우저 창의 Title을 변경 시킬 수 있다!
기존의 React에서는public/index.html에서의title을 설정하면 하나의 title로 유지 되었던 것과 다른 점.
import Head from "next/head";
//...생략
<Head>
<title>제목</title>
</Head>🌐참고사이트 LearnNext
아티클리스트 - bit.ly/3wjIlZJ