[강의] 한 입 크기로 잘라먹는 Next.js #10

Onion·2025년 9월 1일

Next.js 공부

목록 보기

10/11

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi
위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

최적화와 배포

1. 이미지 최적화

1) 이미지 최적화...?

웹페이지에서 평균적으로 58%의 용량을 차지하는 것은 이미지
= 용량의 관점에서만 보자면 웹페이지의 절반 이상이 거의 다 이미지로만 구성

Next.js에서는 대부분의 최적화 기법들이 자체적으로 다 제공이 되고 있음

이미지라는 컴포넌트를 활용하면 이미지 최적화 기법들이 모두 자동으로 적용

이미지를 불러올 때의 문제점

JPEG 형식으로 불러오기
: 나쁜 건 아지미나 되도록이면 WebP나 AVIF 등 JPEG보다 훨씬 더 경량화된 이미지 포맷으로 불러오는 것이 좋다
현재 화면에 렌더링 될 필요가 없는 이미지까지 한번에 불러오고 있음
불러오고 있는 이미지들의 사이즈가 실제로 화면에 나타날 사이즈보다 훨씬 더 큼

2) 실습을 위한 환경 준비

vscode로 열기
vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section08 폴더 생성
vscode에서 /onebite-next/section09/ 폴더 생성
파일 옮기기
/onebite-next/section08 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section09 폴더로 옮기기

필요한 모듈 다운로드
생성된 /section09/ 폴더로 vscode에서 다시 열기
→ vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행
생성된 /section09/ 폴더로 vscode에서 다시 열기
→ vscode의 터미널 열기
→ npm run dev 명령어 실행
→ http://localhost:3000/ 로 이동하면 확인 가능
→ (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
→ vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

이미지 최적화 진행

/src/components/book-item.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/src/components/book-item.tsx
원하는 도메인으로부터 불러오는 이미지는 안전하다는 설정 추가: /next.config.ts 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/next.config.ts
이때 추가하는 값은 images 안에 삽입되며, book-item.tsx 코드 수정 후 실행했을 때 콘솔에 나타나는 에러 메시지의 도메인을 삽입하면 됨
/src/app/book/[id]/page.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/src/app/book/%5Bid%5D/page.tsx

2. 검색 엔진 최적화 (SEO)

1) 검색 엔진 최적화...?

검색엔진을 가지고 있는 포털 사이트들에서 우리가 제작한 서비스에 어떠한 페이지들이 있고 이 페이지에는 어떠한 정보들이 있는지 포털 사이트에서 더 잘 수집해 갈 수 있도록 설정하여, 결과적으로는 우리의 서비스가 검색 결과에 더 잘 노출이 되도록 설정하는 기술

= 우리의 서비스가 검색 결과에 더 잘 노출이 되도록 설정하는 기술

2) 검색 엔진 최적화 방법

Sitemap 설정
RSS 발행
시멘틱 태그 설정
메타 데이터 설정

등등... 많이 있음

현재 강의에서는 페이지별 메타 테이더 설정하는 방법에 대해 알아보기

3) 실습 진행을 위한 환경 세팅

vscode로 section09 폴더 열기
→ vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기
→ vscode 터미널을 열고 npm run start로 백엔드 서버 열기

4) 실습

수업 자료로 올려주신 이미지 파일을 /public/ 폴더 내로 이동

인덱스 페이지의 메타 데이터 설정하기: /src/app/(with-searchbar)/page.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/(with-searchbar)/page.tsx

export const metadata: Metadata = {
  title: "한입 북스",
  description: "한입 북스에 등록된 도서를 만나보세요",
  openGraph: {
    title: "한입 북스",
    description: "한입 북스에 등록된 도서를 만나보세요",
    images: ["/thumbnail.png"],
  },
};

메타 데이터 설정: /src/app/(with-searchbar)/search/page.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/(with-searchbar)/search/page.tsx
▼ 동적 매개변수를 사용하여 메타 데이터 내보내기

export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
  const { q } = await searchParams;
  return {
    title: `${q} : 한입북스 검색`,
    description: `${q} 검색 결과입니다`,
    openGraph: {
      title: `${q} : 한입북스 검색`,
      description: `${q} 검색 결과입니다`,
      images: ["/thumbnail.png"],
    },
  };
}

메타 데이터 설정: /src/app/book/[id]/page.tsx 코드 수정
https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/book/%5Bid%5D/page.tsx
파비콘 설정하기
- 기존에 있던 /src/app/favicon.ico 파일 삭제하기
- 올려주신 자료에 있던 favicon.ico 파일(/public/ 내에 있던 파일)을 /src/app/ 하위로 이동

3. 배포하기

1) 배포를 위한 기본 설정

Vercel 사이트(https://vercel.com/)에서 회원가입 하기
→ 나는 github으로 연동
vscode의 터미널에서 Vercel에 명령어 한번만으로 Next.js 앱을 빌드할 수 있는 도구 설치
npm install -g vercel 실행
vscode의 터미널에서 Vercel에 로그인
→ github에 갖다대서 enter 누르고 진행
배포를 위해, vscode의 터미널에서 vercel 명령어 입력
→ 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력
→ 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력
→ 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력
→ 새로 생성할 프로젝트 이름은 뭐냐는 질문에 onebite-books-app 으로 입력
→ 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기
→ 자동으로 설정된 옵션들을 바꾸고 싶냐는 질문에 n 입력
→ 추가 프로젝트 옵션을 바꾸고 싶냐는 질문에 n 입력
→ 배포 진행중
→ 배포 진행 완료 후 뜨는 링크를 통해 들어가면 확인 가능
이때, 백엔드 서버는 안 열려 있기 때문에 DB에서 데이터를 불러오지 못하고 있음
→ /onebite-books-server/로 새 창을 하나 열어서 vscode 터미널을 새로 열기
→ 터미널에서 vercel 입력
→ 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력
→ 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력
→ 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력
→ 새로 생성할 프로젝트 이름은 뭐냐는 질문에 기본값으로 설정된 걸로 진행을 위해 엔터 입력
→ 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기
→ 바로 배포 작업 진행
→ 배포 완료
백엔드 서버 도메인 확인 후 코드 수정
→ vercel에서 배포한 백엔드 서버(onebite-books-server)에 들어가서 Production Deployment에서 'Domains' 값을 복사
→ vercel에서 배포한 onebite-books-app에 들어가서 settings 탭에서 Environment Variables 탭에서 새로운 환경변수 추가
(Key는 아래 사진과 동일하게 설정, Value는 복사한 값 붙여넣고 https:// 추가)
수정사항을 반영하기 위한 재배포 진행
→ vscode에서 section2/를 기준으로 폴더 열고 터미널 열기
→ 즉시 프로덕션 모드로 배포하기 위해 vercel --prod 명령어 실행
→ 배포 진행 후 완료