Next.js - Assets, Metadata, CSS

2023. 1. 31.·🎨 프론트엔드 공부/React & Next

📍/public

- root의 /public는 /pages 처럼 앱 내에서 참조 가능

- /public 폴더에는 이미지같은 static assets을 보관

 

📍기존 이미지 로드 방식의 한계

<img /> 엘리먼트는 아래 사항을 직접 조절해야 함

- 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응)

- 이미지 최적화를 위해 타사 라이브러리를 사용

- viewport에 들어올 때만 이미지 로딩 가능

 

📍Image 컴포넌트

- 예시

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // 원본 비율을 유지해야 함
    width={144} // 원본 비율을 유지해야 함
    alt="Your Name"
  />
);

 

디폴트 옵션

- 리사이징, 최적화 및 다양한 포맷 지원

- 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행

(따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 - Gatsby에 비해 빌드타임 확실히 빠름)

 

- lazy loading으로 페이지 로딩 속도를 가속

- SEO에 도움을 줌

- 참고

https://web.dev/cls/

 

Cumulative Layout Shift(누적 레이아웃 이동, CLS)

이 게시물에서는 누적 레이아웃 이동(CLS) 메트릭을 소개하고 이를 측정하는 방법을 설명합니다.

web.dev

 

📍Metadata - Head 컴포넌트

/pages/index.js 내의 Head 컴포넌트에 title 태그

 

일반 페이지에 title 추가하기

- import

import Head from 'next/head';

 

📍script 추가하기 - Script 컴포넌트

- 이렇게 직접 추가하는 것도 가능하지만, 렌더링을 blocking하여 속도 저하 유발

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

 

- Script 컴포넌트를 사용하면 된다

- 파일명을 소문자로 사용

// pages/posts/first-post.js
import Script from 'next/script';
// ..

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

 

Script 컴포넌트의 어트리뷰트

1️⃣strategy

- lazyOnload : idle time에 스크립트 로드

2️⃣onLoad 

- 스크립트 로딩이 완료되면 즉시 실행할 자바스크립트 코드

 

📍CSS 사용하기 - Layout 컴포넌트

1️⃣페이지 전체에 적용될 layout을 만들기 위해 Layout 컴포넌트를 만든다

2️⃣FirstPost 컴포넌트를 Layout 컴포넌트로 감싸준다

3️⃣CSS module 방식을 사용하기 위해 layout.module.css 파일을 만들고 css를 작성한다

4️⃣Layout 컴포넌트에서 CSS module 을 import하고 class name을 추가한다

- components/layout.js 예시

import styles from "./layout.module.css";

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

 

📍Global Styles

Next.js 앱에서 전역 스타일링을 적용하려면 pages/_app.js 파일을 생성한다

// pages/_app.js
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

- App 컴포넌트 : 앱의 모든 페이지를 감싸는 top-level 컴포넌트

- 이 컴포넌트로 페이지 네비게이션 중에 state를 유지하거나 전역 스타일링을 적용할 수 있다

⭐_app.js 파일을 작성하고 나서는 개발 서버를 재시작해야한다

 

global css 적용하기

1️⃣root 디렉토리에 styles 폴더를 추가하고 내부에 global.css 파일을 생성한다

2️⃣pages/_app.js 에서 global.css를 import해준다

- pages/_app.js

import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

 

⭐_app.js 파일을 작성하고 나서는 개발 서버를 재시작해야한다

 

📍styles/utils.module.css

- common css class를 만들기 위해 css module 파일을 생성한다

- utils.module.css 예시

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

/* ... */

 

- 이제 해당 클래스를 다른 컴포넌트에서 재사용할 수 있다

 

🤔원래 module.css 파일은 함께 폴더내에 위치한 컴포넌트에서만 쓸 수 있는것 아닌가?

- 그래서 이 폴더 내의 css 들은 module 형식을 썼지만, 실제로는 common, global style에 가깝다

- 실제 module 파일은 components//latout.module.css 같은 것들이다

 

'🎨 프론트엔드 공부/React & Next' 카테고리의 다른 글
  • pages 폴더를 사용할 때 주의 사항
  • metatag, components props
  • create-next-app으로 시작하기, 라우팅
  • fast refresh, code splitting
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (517)
      • 🎨 프론트엔드 공부 (242)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (57)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (16)
        • Work (0)
        • Toy (16)
      • ⚙️ 개발 팁 & 노하우 (1)
        • 프론트엔드 (6)
        • 기타 (16)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
Next.js - Assets, Metadata, CSS
상단으로

티스토리툴바