반응형

📝정적 데이터

/public 폴더에 정적 파일들을 넣는다

 

📝이미지

 

로컬 이미지

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )

width 및 height가 정해져있기 때문에 따로 지정 안 해도 에러가 나지 않는다

 

원격 이미지

import Image from 'next/image'
 
export default function Page() {
  return (
    
  )
}

/** next.config.js에서 허용 필요 **/
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

이미지를 외부에서 받아와야하기 때문에 width와 height를 지정 안 하면 안 된다

 

우선순위

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

priority를 이용해 로딩 우선순위를 정할 수 있습니다

 

상위 컨테이너에 꽉 채우기

<div style={{width: '200px', height: '200px', position:'relative'}}>
    <Image src={"https://previews.123rf.com/images/alexblacksea/alexblacksea1705/alexblacksea170500042/78337223-%EB%8F%85%EC%88%98%EB%A6%AC-%EA%B7%B8%EB%A6%AC%EA%B8%B0.jpg"}
           alt={""} fill={true}/>
</div>

 

fill을 사용하면 상위 크기만큼 이미지를 다 채울 수 있습니다 → position:relative 상위 div 필수

 

 

📝폰트

next/font모든 글꼴 파일 에 대한 자동 자체 호스팅이 내장되어 있습니다 → CSS 및 글꼴 파일은 빌드 시 다운로드되며 나머지 정적 자산과 함께 자체 호스팅됩니다. 즉, 브라우저는 요청을 Google로 전송하지 않습니다

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

/** 가변 글꼴을 사용할 수 없는 경우 가중치 지정 필수 **/
//const roboto = Roboto({
//  weight: '400',
//  subsets: ['latin'],
//  display: 'swap',
//})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}
  • weight
    • 가변글꼴에는 줄 필요 없고 나머지는 주는데 브라우저상에서 파악해 어떤 weight를 줄지 알아서 판단한다 만약 style을 따로 줄 경우 style이 우선순위가 높음
  • subsets
    • 하위 집합 중 미리 로드할 하위 집합을 정의합니다 → latin이 우선순위로 preload되고 나머지언어는 후순위 느낌인데 테스트 해봐도 잘 모르겠다
    • latin이라고 적혀있으면 latin만 적용시키는게 아닌 다른 언어가 있으면 알아서 파악해서 가져온다
  • display
    • block
      • 폰트가 사용 가능하게 되면, 브라우저는 기다리지 않고 즉시 해당 폰트를 사용하여 페이지를 렌더링합니다.
    • swap
      • 폰트가 다운로드되면, 브라우저는 기존에 사용된 폰트와 즉시 교체하여 더 나은 사용자 경험을 제공합니다.

 

로컬 글꼴의 경우 next/font/local에 저장한 이후에 사용이 가능하다

 

 

📝스크립트

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      {children}
    </html>
  )
}

타사 스크립트를 로드하려면 next/script 스크립트를 루트 레이아웃에 직접 가져와 포함하세요

Next.js는 사용자가 여러 페이지 사이를 이동하더라도 스크립트가 한 번만 로드되도록 보장합니다

 

→ 타사 스크립트 사용시 추가적으로 보면 좋을 것 같다

https://nextjs.org/docs/app/building-your-application/optimizing/scripts

 

 

📝정적 메타데이터

export const metadata: Metadata = {
  title: 'Create Next App!!', // 탭 Title
  description: 'Generated by create next app', // 설명
}

layout.js와 page.js에서 설정 가능 → 서버 컴포넌트에서만 지원

 

📝동적 메타데이터

동적 값이 필요한 메타데이터 generateMetadata에 함수를 사용해 메타데이터를 생성할 수 있습니다 → 서버 컴포넌트에서만 지원

 

📝파일 기반 메타데이터

opengrapqh, seo 허용, seo guid, favicon설정 가능

 

📝동적 이미지 생성

import { ImageResponse } from 'next/og'
 
export const runtime = 'edge'
 
export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  )
}

ImageResponse를 이용해 오픈 그래프 이미지, 트위터 카드 등과 같은 소셜 미디어 이미지를 만드는 데 유용합니다

 

📝정적 Assets

import Image from 'next/image'
 
export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

public → 기본 URL 부터 시작하는 코드로 참조될 수 있습니다 (/me.png)

 

반응형

'[Next.js] > [Next 14]' 카테고리의 다른 글

[Next 14] 분석(모니터링), Typescript, ESLint, 환경 변수, 경로 별칭, MDX  (0) 2024.01.02
[Next 14] Lazy Loading, Next/Dynamic (청크 분리, 코드스플리팅)  (0) 2024.01.02
[Next 14] 외부 라이브러리, 런타임(Runtime), CSS Style  (0) 2024.01.02
[Next 14] Server Component (SSR), Client Component (CSR)  (1) 2024.01.02
[Next 14] 미들웨어 (Middleware)  (0) 2024.01.02

티스토리툴바