Next.js를 이용한 사이트 완성하기
1. Image 컴포넌트
import Image from 'next/image';
export default function Test() {
return (
<>
<Image
src="/images/product.jpeg"
width="400"
height="400"
alt="상품 이미지"
/>
</>
);
}2. Image 컴포넌트 사용법
import Image from 'next/image';
export default function Test() {
return (
<>
<div style={{
position: 'relative',
width: '50%',
height: '200px',
}}>
<Image
fill
src="/images/product.jpeg"
alt="상품 이미지"
style={{
objectFit: 'cover',
}}
/>
</div>
</>
);
}
// next.config.js
...
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com', // 설정해주어야 한다
port: '',
pathname: '/account123/**', // 설정해주어야 한다
},
],
},
...public 폴더가 아닌 외부의 이미지를 사용할 때는 next.config.js를 설정해 주어야 한다.
3. Head 컴포넌트
// 페이지 제목 및 아이콘 설정(모든 페이지에 동일하게 적용시킬 때는 _app.js에서 작성)
import Head from 'next/head';
...
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<title>제목</title>
<link rel="icon" href="/favicon.ico" /> // public 폴더 내 파일
</Head>
<ThemeProvider>
<Header />
<Container>
<Component {...pageProps} />
</Container>
</ThemeProvider>
</>
);
}4. 구글 폰트 적용하기
Next.js에서는 구글 폰트를 위한 기능도 제공한다. 구글 폰트를 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도 함께 제공한다. 예를 들어 Noto Sans KR이라는 폰트를 적용해 본다고 가정하자. _app.js 파일에서 적용을 할 때, @next/font/google이라는 패키지에서 Noto_Sans_KR을 임포트하고 객체를 만든다.
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '700'],
subsets: [],
});weight 프로퍼티에는 사용할 폰트 굵기를 적는다. 굵기 400, 700을 갖는 폰트를 쓴다. 주의할 점은 숫자형태가 아닌 문자열('400', '700' 같은 형태)라는 것이다.
subsets는 빈 배열로 했는데, 서브셋이라는 건 폰트에서 영문, 한글 이런 식으로 사용할 글자들만 골라서 사용할 때 쓰는 건데, 일단 전부 다 사용하는 걸로 설정했다. 만약에 영문만 사용하는 폰트라면 ['latin']과 같이 작성하면 된다.
폰트를 적용하려면 notoSansKR 객체의 className 프로퍼티를 사용할 수 있는데, 이 클래스가 적용된 요소 안에서는 폰트를 적용하게 된다.
<main className={notoSansKR.className}>
...
</main>아니면 Next.js에서 제공하는 Head 컴포넌트를 활용해서 전역 스타일로 적용할 수도 있다.
<Head>
<style>{`
html {
font-family: ${notoSansKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>폰트를 적용하고 개발자 도구를 열어서 Network 탭의 세부 탭인 Font 탭을 살표보면 구글 사이트가 아니라, 해당 사이트에서 폰트 파일을 받아오는 것을 알 수 있다. 그래서 초기 로딩 속도가 훨씬 빠르다.
5. 빌드하기와 실행하기
리액트 코드를 브라우저가 실행할 수 있게 변환해야 하며, 서버 실행에 필요한 코드들을 생성해야 한다.
npm run build
npm run start (npm start)
6. Vercel 배포하기
- Vercel 홈페이지로 가서 Sign up 버튼을 누르고 GitHug으로 가입한다.
- 가입 후 팝업이 뜨면 Install 버튼을 눌러 설치한다.
- 만들어놓은 Next.js 프로젝트 레포지토리를 임포트한다. 여러가지 설정을 할 수 있지만 우선 Deploy를 눌러 배포한다.
- Continue to Dashboard를 눌러 대시보드로 이동한다.
- DOMAINS에 적혀 있는 주소로 접속하면 배포된 앱을 확인할 수 있다.
- 오른쪽 위에
View Build Logs버튼을 눌러 배포된 과정을 살펴본다. Deployment Status > Building을 보면 터미널 기록 같은 것을 볼 수 있다. 서버에서 어떤 실행을 했는지 보여준다. - 새로 배포를 하려면 메인 브랜치에 코드를 푸시하기만 하면 된다.
7. 정리
(1) <Image> 컴포넌트
Next.js에서는 이미지를 사용할 때 Next.js 서버를 한 번 거쳐서 이미지 최적화를 한 다음 사용할 수 있도록 해주고 있다. 그래서 되도록이면 <img> 태그보다는 <Image> 컴포넌트를 사용하는걸 권장한다. <Image> 컴포넌트는 next/image에서 불러와서 사용한다. 이때 반드시 크기가 있어야 한다. width와 height 값을 지정하거나 또는 fill이라는 Prop을 사용할 수 있다.
1. width와 height를 사용하는 경우
<img> 태그와 마찬가지로 너비와 높이를 지정해 준다.
import Image from 'next/image';
export default function Page() {
return (
<>
<Image
src="/images/product.jpeg"
width={300}
height={300}
alt="상품 이미지"
/>
</>
);
}2. fill을 사용하는 경우
이미지 크기를 유연하게 지정해야 할 때는 fill을 사용한다. 이때 부모 요소에서 position: relative와 같이 포지셔닝해야 한다. fill을 사용할 경우 absolute 포지션으로 배치되기 때문에, "가장 가까운 포지셔닝이 된" 조상 요소에 꽉 차도록 이미지가 배치된다. 만약 이미지의 비율이 깨지는 것을 막고 싶다면 object-fit: cover 속성으로 이미지를 크롤하면 된다.
import Image from 'next/image';
export default function Page() {
return (
<>
<div
style={{
position: 'relative',
width: '100%',
height: '300px',
}}
>
<Image
src="/images/product.jpeg"
fill
alt="상품 이미지"
style={{
objectFit: 'cover',
}}
/>
</div>
</>
);
}(2) <Head> 컴포넌트
next/head에서 불러와서 <Head> 컴포넌트 안에 <head> 태그에 넣고 싶은 코드를 작성하면 된다.
import Head from 'next/head';
export default function Page() {
return (
<>
<Head>
<title>페이지 제목</title>
<link rel="icon" href="/favicon.ico" />
</Head>
...
</>
);
}만약 사이트 전체에 공통적으로 적용하고 싶다면, /pages/_app.js 파일에서 <Head> 컴포넌트를 활용하면 된다.
import Head from 'next/head';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<title>사이트 기본 제목</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
);
}(3) 개발모드, 빌드, 실행 그리고 배포
1. 개발 서버 켜기
개발 모드이기 때문에 새로고침 없이도 수정 사항을 그때그때 확인할 수 있다.
npm run dev2. 빌드하기
Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행을 해야 하는데, 이러한 과정을 "빌드"라고 한다.
npm run build.next 폴더에 실행에 필요한 파일들이 생성된다.
3. 실행하기
npm run start4. 배포하기
