[TIL] 12주차 수요일. Next.js 분반 강의. 개인 과제 - 포켓몬 도감 만들기

Minji Kim·2024년 7월 3일

내배캠TIL

목록 보기
52/73

스탠다드 반 강의 메모 - Next.js 복습 (1)

1. use client

page 컴포넌트에 use client 쓰는 거 지양
use가 들어있는 것들, useEffect, useState etc. = 거의 브라우저 환경, client component에서만 동작!

2. 이미지 컴포넌트

이미지 컴포넌트 - next.js를 vercel로 배포하면 비쌈.
그래서 image 컴포넌트 사용하려면 비싼만큼 보안이 필요.
image 컴포넌트 사용하려면 remotePetterns 적용해야 함.
src/next.congit.mjs

3. 환경변수

서버 환경에서 접근 시에는 자유롭게 환경변수 네이밍 가능
클라이언트 환경에서 접근 시에는 prefix로 NEXTPUBLIC을 붙여줘야 함

4. Tailwind & reset.css

테일윈드 쓰면 reset.css 따로 쓸 필요 없음. 이미 되어 있음

5. Next.js 쓸 때 Tailwind 권장하는 이유

Styled-components 같은 건 클라이언트 사이드에서만 가능하고 서버 사이드에서 읽을 수 없음

6. 동적 metadata 설정

페이지마다 설정을 다르게 줄 수 있는데, 이걸 자동으로 바뀌도록 동적 설정 해주는 게 좋다
동적 설정이 안 될수록 구글 검색 같은 데서 노출이 안 됨

0개의 댓글