이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다.
0. 설치
npx create-next-app nextjs-blog --use-npm --example "<https://github.com/vercel/next-learn/tree/master/basics/learn-starter>"
1. 라우팅
- page 폴더 내 폴더나 파일 생성
ex ) /posts/first-post 경로를 만들고싶다면 pages/posts/first-post.js 이런식으로 파일 생성하면 자동으로 라우팅이 된다.
import Link from 'next/link';
// ..
<Link href="/">이동하기</Link>
⇒ 위와 같은 예제로 링크 라우팅이 가능
Link 를 이용하면 client-side Navigation 이 가능하다.
- 브라우저 내 개발자도구로 style 을 변경한 후 페이지 이동하고 돌아와도 바꾼 스타일이 그대로 적용되어있음!
- a 태그를 쓴다면 브라우저가 전체 새로고침을 하기 때문에 리셋됨
Code splitting, prefetching
- next.js 는 코드 분할을 자동으로 수행하므로 페이지는 해당 페이지에 필요한것만 로드한다.
- 다른페이지의 코드는 제공되지 않음
- 따라서 수백개의 페이지가 있는 경우에도 홈페이지는 빠르게 로드된다.
- 특정페이지에 오류가 있어도 나머지 페이지는 제대로 작동함!
- Link 구성요소가 브라우저의 뷰포트에 나타날때마다 Next.js 는 백그라운드에서 연결된 페이지에 대한 코드를 자동으로 미리 가져옴
- 따라서 링크를 클릭할 때 쯤에는 그 페이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환이 빠름!
2. Assets, Metadata, CSS
- Next.js 에는 CSS 및 Sass 가 내장되어있음
Assets
이미지 불러오기
<img src="/images/profile.jpg" alt="Your Name" />- 일반 HTML 을 통해서도 이미지를 불러올 수 있다.
- 하지만 이렇게 사용하면 수동으로 처리해야하는 부분이 생김
- 이미지가 다양한 화면 크기에서 반응하는지 확인
- 서드파티 라이브버리로 이미지 최적화
- 뷰포트에 들어갈 때만 이미지 로드
- 하지만 이렇게 사용하면 수동으로 처리해야하는 부분이 생김
- 따라서 Image 라는 구성요소를 이용하여 이미지를 불러온다!
import Image from 'next/image';
<Image src="/images/profile.jpg" height={144} width={144} alt="profile" />
- 이미지 최적화 지원 (WebP 와 같은 최신형식의 이미지 크기 조정, 최적화 기능)
- 빌드시 이미지를 최적화
- 뷰포트 외부의 이미지는 페이지속도에 영향을 끼치지 않음
- 이미지는 뷰포트로 스크롤될 때 로드된다.
메타데이터
- Head 를 이용
import Head from 'next/head';
// ...
<Head>
<title>Create Next App</title>
</Head>Third-party JS
- Head 내에 script 태그로 불러오기
- next/script 의 Script 를 이용하여 가져오기
import Script from 'next/script';
//...
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>- stratege : 스크립트를 로드하는 시간을 조정한다. ‘lazyOnload’는 브라우저가 쉬는동안에는 특정 스크립트를 느리게 로드하도록 지시한다.
- onLoad : 스크립트 로드가 완료된 직후 JS 코드를 실행하는데 사용된다. (예제에서는 스크립트가 올바르게 로드되었는지를 체크)
CSS 스타일링
styled-jsx
<style jsx>{`
…
`}</style>
- CSS-in-JS 라이브러리
- 다른 컴포넌트에 영향을 받지 않음
CSS 모듈
- someComponents.module.css 라는 파일을 생성 (CSS 모듈은 파일 끝이 .module.css 여야함)
- js 파일에 import 한다
import styles from "./layout.module.css";/* ./layout.module.css */
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
- className을 styles.container 로 지정해야함
- 위와 같이 적용하고 개발자도구를 보면 고유한 클래스네임으로 바뀌어있다. (충돌 걱정 X)
전역 스타일
전역 CSS 파일을 로드하려면 pages 폴더 내에 _app.js 파일을 생성하여 적용시켜야한다.
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}- App 은 다른 모든 페이지에서 공통적으로 사용되는 최상위 구성요소이다.
- App 생성후에는 서버 재시작 필요
- 최상위 루트에 styles 폴더 생성 후 그 안에 global.css 파일을 생성하고 _app.js 에 import 한다
import '../styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}스타일링 팁
- classnames
- 클래스 이름을 쉽게 토글할 수 있는 라이브러리
- postCSS
- Sass
'웹공부' 카테고리의 다른 글
| Next.js 튜토리얼 따라하기 - 3 (Dynamic Routes) (0) | 2022.04.16 |
|---|---|
| Next.js 튜토리얼 따라하기 - 2 (사전렌더링, 데이터 가져오기) (0) | 2022.03.21 |
| 웹크롤러, 검색과 SEO (0) | 2022.03.01 |
| Parcel Bundler 튜토리얼 (0) | 2022.02.04 |
| socket.IO 를 이용한 채팅 사이트 만들기 - 1 (0) | 2021.10.15 |