Resource

장현욱(Artlogy)·2022년 12월 6일

nextjs

Next.js

목록 보기

3/6

Image

NextJS에서는 <img>요소의 개선버전으로 next/image를 제공합니다.
개선된 사항은 다음과 같습니다. (Next 13버전 기준)

성능 향상 : 최신 이미지 형식을 이용해 각 환경에 맞는 올바른 크기의 이미지 제공
시각적 안정성 : 자동으로 이미지 CSL 방지
빠른 로드 : 용량이 큰 컨텐츠의 경우 priority속성으로 로드의 우선순위를 줄 수 있음
유연성 : 서버에 저장된 이미지에도 자동으로 크기 조정

로컬 이미지

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} 기본값은 auto
        // height={500} 기본값은 auto
        // blurDataURL="data:..." 
        // placeholder="blur" // 완전히 로드 될 때까지 블러 여부
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

원격 이미지

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}	//로컬이미지가 아닌 경우엔 width, height를 명시해야 합니다.
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Font

NextJS에서는 13버전 부터 새로운 폰트 시스템을 제공합니다.

폰트 자동 최적화
불필요한 request를 제거하여 성능 향상
Built-in automatic self-hosting for any font file
size-adjust 옵션을 이용한 layout shift 제거

📝 size-adjust 폰트마다 같은 크기값이라도 실제 크기가 다른데
폰트의 실제 크기를 지정한 크기값에 맞춰주는 기능을 뜻합니다.

구글폰트에 존재하는 모든 폰트를 지원하기 때문에 브라우저에 요청을 보낼 필요없이 정적 자원으로 활용이 가능합니다.

구글 폰트

import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] });

<html className={inter.className}>

커스텀 폰트

다음과 같이 커스텀 폰트 또한 지원하며 캐싱, preoading을 지원합니다.

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

File

NextJS는 루트 디렉토리에 있는 public폴더 아래의 모든 요소는 정적파일로써 사용이 가능합니다. 기본 URL은 /입니다.

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

Script

NextJS에는 Script로드시 next/script를 사용합니다.

페이지 스크립트

//pages/dashborad.tsx
import Script from 'next/script'

export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  )
}

특정 페이지가 로드 될 때만 스크립트를 가져와 실행합니다.

애플리케이션 스크립트

모든 페이지에서 사용 되는 스크립트를 로드 할려면 다음과 같이 App에서 처리합니다.

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script src="https://example.com/script.js" />
      <Component {...pageProps} />
    </>
  )
}