Image 컴포넌트
public이라는 폴더는 특별한 폴더이다. 이 폴더 안에 있는 파일은 사이트에서 /파일 경로를 적으면 접근할 수 있다.
next.js의 Image 컴포넌트는 주소를 바꿔주고 이미지 원본을 바로 쓰는게 아니라 Next.js의 서버를 한 번 거쳐서 최적화된 크기의 이미지를 가져온다.
레이지 로딩
이미지가 필요한 순간 다운받기 때문에 페이지 로딩 속도를 최적화 할 수 있다.
사용법
이미지의 크기를 최적화 해주기 때문에 이미지의 크기를 꼭 지정해줘야 한다.
<Image
src="/images/product.jpeg"
width={300}
height={300}
alt="상품 이미지"
/>유연하게 크기를 지정하는 방법
fill : 조상 요소에 꽉차게 채우는 것
objectFit : 비율을 유지하면서 유연하게 크기를 지정해주고 싶을 때
<Image
fill
src="/images/product.png"
alt="상품 이미지"
style={{
objectFit:'cover',
}}
/>
Image 컴포넌트 사용할 때는 프로젝트 내부에 있는 이미지들은 그냥 쓸 수 있지만 프로젝트 외부에 있는 것들은 따로 설정을 해줘야 한다.
이 설정 값은 우리가 사용할 외부 이미지 주소를 미리 next.js 서버로 가져오는 것이다.
nextconfig.js
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port:'',
pathname:'/account123/**',//**는 뒤쪽에 있는 모든 경로를 포함한다는 것
},
],
},Head 컴포넌트
Html에서는 head 태그 안에 title을 썼었듯이 Next.js에서도 Head 태그 안에 title을 넣으면 된다.
Html에서 head 태그 안에 들어가는 내용은 Head라는 컴포넌트 안에 작성하면 되고, 모든 페이지에 공통으로 적용시키고 싶으면 _app.js에서 작성하면
된다.
_app.js
import Head from 'next/head';
<Head>
<title>제목</title>
<link rel='icon' href='favicon.ico'/>
</Head>_app.js에서 이렇게 아이콘과 타이틀을 정하면 모든 페이지에 다 적용되고,
import Head from 'next/head';
<Head>
<title>검색결과</title>
</Head>다른 컴포넌트에서 Head, title 태그를 넣으면 기존에 있던 타이틀에 덮어쓰게된다.
구글 폰트 적용하기
Next.js에서는 구글 폰트를 위한 기능도 제공한다.
예를 들어 Noto Sans KR이라는 폰트를 적용한다고 할 때 _app.js 파일에서 @next/font/google 패키지에서 임포트 하고 아래처럼 객체를 만든다.
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '700'],
subsets: [],
});weight: 폰트 굵기
subsets: 폰트에서 영문, 한글 이런식으로 사용할 글자들만 골라서 사용할 때 쓰는 것, 빈 배열로 하면 전부 다 사용한다는 의미이다. (영문만 사용하는 폰트라면 ['latin']과 같이 써주면 된다.
폰트를 적용할 때는 notoSansKR 객체의 className 프로퍼티를 사용하면 된다. 이 클래스가 적용된 요소 안에서 폰트를 적용하게 된다.
<main className={notoSansKR.className}>
...
</main><Head>
<style>{`
html {
font-family: ${notoSansKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>Head 컴포넌트를 활용해서 전역 스타일로 적용할 수도 있음
구글 사이트가 아니라 우리 사이트에서 폰트 파일을 받아오는 것이기 때문에 초기 로딩 속도가 빨라진다는 장점이 있다.
빌드하기와 실행하기
빌드
- 리액트 코드를 브라우저가 실행할 수 있게 변환
- 서버 실행에 필요한 코드들 생성
npm run build.next 폴더에 빌드한 파일들이 들어간다.
서버 실행 (반드시 빌드가 된 상태에서만 실행할 수 있음)
npm run start
npm startnpm run dev
npm run dev는 개발 모드에서 실행되기 때문에 소스코드가 바뀌면 바로 반영되는 것처럼 개발할 때 편리한 기능들이 함께 동작
npm run start -> 프로덕션 (운영)
배포하기 (Vercel)
Vercel 홈페이지
netrify와 같은 방식으로 배포하면 된다.
