next.js

Assets, Metadata, CSS

덕구공 2022. 12. 1. 15:21

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>
  )
}