[Next.js] Assets, Metadata, and CSS

Assets, Metadata, and CSS

설명

  • Next.js 는 built-in CSS를 제공

Assets

  • Next.js는 public 폴더 아래로 이미지 같은 정적 요소를 제어.
  • public 폴더 아래의 파일들은 애플리케이션에서 참조된다.

Image

설명
  • Next.js의 Image 태그는 최신 웹용으로 확장된 next/imageHTML img요소이다.
  • 브라우저에서 지원하는 경우 JPEG보다 약 30 % 작은 WebP와 같은 최신 이미지 형식으로 이미지를 자동으로 제공한다.(필요에 따라 이미지 최적화)
  • 뷰포트를 스크롤하는 동안 특정 임계 값에 도달 한 경우에만 페이지 내부의 이미지를 지연로드한다.
  • 동적으로 사용할 다양한 및 사용자 정의 해상도에 대해 다른 이미지 크기를 지정할 수 있다.
  • 사진의 품질을 75 %로 설정된 낮은 임계 값으로 자동 변경한다(각 호출에 대해 변경 가능)
Import
import Image from 'next/image'
사용
<Image
  src="/images/profile.jpg"
  height={144} width={144} alt="woogie"
/>

Metadata

Head

  • 리액트에서는 head 태그 대신에 Head 태그를 사용
Import
import Head from 'next/head'
사용
<Head>
  <title>First Post</title>
</Head>

CSS Styling

style jsx

style 태그
<style jsx>{`
  ...
`}</style>

CSS 파일 생성 및 import

  • 반드시 이름을 파일명.module.css 로 생성
layout.module.css
.container {
    max-width: 36rem;
    padding: 0 1rem;
    margin: 3rem auto 6rem;
}
layout.js
  • className={styles.container}
  • styles는 module.css 파일을 import할 때 지정한 이름
  • container는 module.css 파일에서 정의한 클래스 명
import styles from './layout.module.css'

export default function Layout({ children }) {
  return (
    <div className={styles.container}>
      {children}
    </div>
  )
}
first-post.js
  • Layout 태그 사이의 요소들은 layout.js의 default함수를 거쳐 layout이 입힌 채로 나온다.
import Layout from '../../components/layout'

export default function FirstPost() {
  return (
  <Layout>
    <Head>
      <title>First Post</title>
    </Head>
    <h1>First Post</h1>
    <Link href="/">
      <a>Back to home</a>
    </Link>
    <Image
      src="/images/profile.jpg"
      height={144} width={144} alt="woogie"
    />
  </Layout>
  )
}

Global Styles

  • 모든 페이지에 같은 CSS 파일이 로드되기 원한다면 사용
  • index.js와 같은 폴더에 _app.js 생성(이름고정)
  • 만든 후에는 반드시 서버를 내리고 다시 올려야함
    • npm run dev
_app.js
import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}
global.css
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

links

social