Assets, Metadata, CSS

세나정·2023년 3월 20일

Next.js

목록 보기

6/9

Next는 빌트인으로 CSS와 Sass를 제공

Static assets (이미지)와 title 태그처럼 페이지 메타 데이터를 처리하는 방법에 대해서도 설명할 예정

배울내용

Next에 정적 파일 (이미지 등)을 추가하는 방법

각 페이지의 <head> 태그 안을 커스터마이징 하는 방법

CSS를 활용하여 스타일이 지정된 재사용 가능한 React 구성요소를 만드는 방법

.NET에서 전역 CSS를 추가 pages/_app.js 하는 방법

스타일링에 대한 유용한 팁

- Assets

Next는 정적 자산을 public 디렉토리 아래에 제공할 수 있고 public 안에 파일들을 pages와 똑같은 루트라 생각하면 됨

최적화 되지 않은 이미지

원래는 일반 HTML을 활용하면 다음과 같이 프로필 사진을 추가 했었음

<img src="/images/profile.jpg" alt="Your Name" />

하지만 이렇게 하는 것은 곧 수동으로 처리해야하는 여러 것들을 의미
1. 다양한 화면 크기에서 이미지가 반응하는지
2. 타사도구 또는 라이브러리 이미지 최적화
3. 뷰포트에 들어갈 때만 이미지를 로드

Next는 image를 처리하기 위해 즉시 사용가능한 구성요소를 제공

이미지 구성 요소 및 이미지 최적화

next/image는 HTML의 img 요소보다 현재 웹을 위한 확장 개념

기본적으로 이미지 최적화를 제공하기 때문에 브라우저에서 지원하는 경우 WebP와 같은 최신 형식으로 이미지 크기 조정, 최적화 및 제공이 가능

이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지가 전달되는 것을 방지할 수 있음
더 나아가, 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있음

자동 이미지는 모든 이미지 소스에서 작동하고 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여전히 최적화 가능

이미지 구성요소 사용

빌드시 이미지를 최적화 하는 대신, Next는 사용자가 요청할 때 주문형 이미지를 최적화함

SSG 및 정적 전용 솔루션과 달리 10개의 이미지던, 1천만 개의 이미지던 둘 모두 배송할 떄 빌드시간이 늘어나지 않음

이미지는 기본적으로 lasy load가 됨 즉, 표시 영역 외부의 이미지에 대해 페이지 속도가 저하 되지 않고 이미지가 뷰포트로 스크롤 되며 로드됨

이미지는 항상 Google이 검색 순위에 사용할 Core Web Vital인 Cumulative Layout Shift (CLS)를 피하는 방식으로 렌더링 됨

이제 next/image가 프로필 사진을 표시하는 예이고 높이 및 너비 소품은 원하는 렌더링 크기여야 하며 가로 세로 비율은 원본 이미지와 동일해야 합니다.

- Metadata

HTML 태그의 <title>처럼 우리가 페이지의 메타 데이터를 수정하고 싶을 땐?
<title>은 HTML의 Head 영역에 존재함 pages/index.js 에서 확인할 수 있음

여기에서 신기한 점은 head로 소문자가 아닌 Head로 대문자라는 것
여기서 <Head> 컴포넌트는 Next의 내장되어 있는 리액트 컴포넌트임

first-post.js에 Head 넣어보기

import Head from "next/head";

를 import하여 Head기능을 가지고 온 다음

first-post.js에 삽입하여 주면 예상대로 first-post페이지의 title이 바뀌어서 나옴

Third-Party JavaScript (외부 자바스크립트)

다른 곳에서 작성되어 추가된 모든 스크립트를 의미하며
일반적으로 분석, 광고 및 고객 지원 위젯과 같이 처음부터 작성할 필요가 없는 최신 기능을 사이트에 도입하기 위해 포함됨

한번 다른 곳에서 나온 스크립트를 넣어보자

paets/posts/first-post.js에 다음 행에서 Head쪽을 찾은 이유는
메타데이터 외에도 가능한 한 빨리 로드하고 실행해야하는 스크립트는 일반적으로 <Head> 페이지 내에 추가되기 때문

위 스크립트에는 페이스북 소셜 플러그인 및 기타 기능을 소개하는 Facebook SDK가 포함되어 있음

이 접근 방식은 작동은 하지만 이렇게 한다면 동일한 페이지에서 가져온 다른 JS 코드와 관련하여 언제 로드될지 명확히 알 수 없기 때문에, 특정 스크립트가 렌더링을 차단하고 페이지 콘텐츠 로드를 지연시킬 수 있는 경우 성능에 상당한 영향을 미침

우리가 알던대로 사용을 하기 위해선 다음처럼 <script>를 추가하면 될 것이지만
Next의 Sciprt 구성요소를 사용하여 실행 해보려한다

import Script from 'next/script';

스크립트를 import한 후에

여러 추가 속성을 정의하여 스크립트를 구성

Strategy : 자바스크립트를 로드해야 하는 시기를 정함

lasyOnload : 브라우저 대기 시간 동안, 스크립트를 느리게 로드하도록 Next에 지시

onLoad : 스크립트 로드가 완료된 직후 실행할 코드

- CSS 스타일링

CSS 모듈 외에 Next.js의 스타일을 지정하는 방법

Sass import .css & .scss 파일들
테일윈드 CSS처럼 PostCSS 라이브러리
JS 라이브러리와 같은 styled-jsx, styled-components 와 emotion

자 이제 CSS 모듈과 Sass를 사용하는 방법에 대해 배울 예정

CSS

기존의 React와 큰 차이 없이 css파일을 생성후에 넣어줌

개발자도구로 div에 의해 렌더링된 layout의 클래스 이름이 고유한 이름으로 설정된 것을 볼 수 있음

CSS 모듈은 빌드시 JS번들에서 추출 되고 .css 파일은 Next.js에 의해 자동으로 로드 됨

전역 스타일

모든 페이지에서 일부 CSS를 로드하려는 경우도 지원함

전역으로 사용하기 위해 _app.js를 생성한 후

전역 코드 입력 후 다시 재실행

npm run dev

그런 다음 Next.js에서 전역 CSS 파일을 가져와 추가함

전역 CSS가 페이지의 모든 요소에 영향을 미치기 때문에 _app.js말고는 다른 곳에서는 사용 X

// globals.css
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}