Assets, Metadata, CSS

Assets, Metadata, CSSnext.js2022. 12. 1. 15:21@덕구공

Table of Contents

Assets(img, Image)

next.js의 가장 상위에 있는 public 디렉토리에 프로젝트에 쓰일 static 데이터를 넣을 수 있다.

만약 public 아래 있는 image 디렉토리에 뚱이.jpg라는 파일이 있다면 아래처럼 img 태그에 사용할 수 있다.

<img src="/image/뚱이." alt="test image"/>

Image Component

img 태그 대신 next.js에서 제공하는 Image 컴포넌트를 이용할 수도 있다.
- lint를 사용하면 img 엘리먼트 대신 Image 컴포넌트를 이용하라고 경고가 뜸!
- Image 컴포넌트의 장점은 view port에 보일 때만 이미지를 불러오도록 lazy loading을 할 수 있고 이미지 용량의 최적화, placeholder 제공 등이 있다.

Local Image

로컬에 있는 이미지를 import해서 사용하는 방법이다. Image 컴포넌트의 src 속성에 url이 아닌 미리 import한 이미지를 넣는 방식
- import를 사용한 이미지 파일은 빌드 타임에 분석이 가능!
Image 컴포넌트에 width와 height를 넣어줄 필요 없이 import한 파일에 의해 결정된다. 개발자가 지정해줘도 상관 없음!

아래처럼 Image 컴포넌트를 import해서 사용하자

import Image from 'next/image'

public 아래 넣어둔 이미지를 import한 후 src에 넣어 아래처럼 사용할 수 있다.

import testImage from '../public/image/뚱이.jpg'

...

<Image src={testImage} alt="test image"/>

Remote Image

Image 컴포넌트의 src 속성에 이미지 파일의 절대/상대 경로를 넣어 사용하는 방법이다.
주의할 점은 width와 height 속성을 모두 넣어주어야 한다! Next.js는 빌드 타임에 경로상의 파일에 접근할 수 없기 때문에 width와 height를 모두 지정해놔야 한다.

<Image src='/image/뚱이.jpg' alt="test image" width={500} height={700}/>

Metadata

Next.js에서는 React와 다르게 Head 컴포넌트를 사용해서 페이지마다 메타데이터를 설정할 수 있다.
- favicon, title, meta태그 등등..

<Head>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <link rel="icon" href="/favicon.ico" />
</Head>

CSS

global 단위

page 디렉토리 아래 있는 _app.js(_app.js or _app.jsx or _app.tsx) 파일에 스타일 파일을 import하면 전역으로 CSS 적용이 가능하다.

styles 폴더에 아래와 같은 test.css 파일을 생성하고 pages 파일 아래 있는 _app.js 파일에서 import 해보자

body{
    color: blueviolet;
}

아래처럼 _app.js 파일에서 스타일 파일을 import 한다면 프로젝트 전역에 해당 스타일이 적용된다!

import '../styles/test.css'
import type { AppProps } from 'next/app'

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

component 단위

Next.js에서 CSS Module을 사용해서 [name].module.css과 같은 네이밍 컨벤션을 이용해서 컴포넌트 단위의 스타일 파일을 생성할 수 있다.
CSS Module은 유니크한 className을 생성하여 CSS의 범위를 local로 지정해주기 때문에 className에 대한 충돌 걱정 없이 다른 파일에서도 동일한 className을 사용할 수 있다!!

아래와 같이 CSS Module 파일을 하나 생성한 후 컴포넌트에서 import해서 사용해보자 !

styles 폴더 아래 Button.module.css 파일을 아래처럼 만들어보자

styles/Button.module.css

customButton이라는 className에 대한 스타일이 지정되어 있다!

.customButton {
    font-size: 24px;
    color: #fff;
    background-color: cadetblue;
    border: 0;
    border-radius: 15px;
    padding: 5px 10px;
}

이 스타일을 import해서 사용할 컴포넌트도 하나 작성해보자.

components 폴더를 하나 만들고 그 안에 Button.tsx 파일을 만들어보자

components/Button.tsx

CSS Module을 style이라는 이름으로 불러온 후 그 안에 있는 className을 사용하고 있다.
- CSS Module을 불러올 때 꼭 style이라는 이름으로 불러올 필요 없이 개발자가 편할데로 가져오면 됨!

import style from "../styles/Button.module.css"

export const Button = () => {
    return (<button className={style.customButton}>test button</button>)
}

이제 이 컴포넌트를 렌더링시켜보자!

/pages/index.tsx

import Head from 'next/head'
import { Button } from '../components/Button'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {/* Button 컴포넌트 */}
      <Button/>
    </div>
  )
}

'next.js' 카테고리의 다른 글

pages, Pre-rendering (0)	2022.12.07
next.js 시작해보기 (0)	2022.11.30

@덕구공 :: Duck9s'

주니어 개발자에욤

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!