Assets, meta data and Css
Next.js는 최상위 public폴더아래 이미지와 같은 정적 컨텐츠를 제공할수 있습니다.
일반적으로 <img>태그를 이용하여 이미지를 html에 넣는 것과 달리 next에서는 <Image>태그를 이용해 이미지를 렌더합니다.
Next.js는 기본적으로 이미지 최적화도 지원합니다. 이를 통해 브라우저가 지원하는 경우webp와 같은 최신 형식으로 이미지 크기 조정, 최적화 및 제공이 가능합니다 . 이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지를 전달하는 것을 방지할 수 있습니다. 또한 Next.js는 미래의 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다.
자동 이미지 최적화는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에 의해 호스팅되더라도 여전히 최적화될 수 있습니다.
import Link from "next/link";
export default function Home() {
return (
<div>
<Link href="https://nextjs,org">Next.js!</Link>
<Image
src="/images/profile.jpeg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name"
/>
</div>
);
}
이번엔 메타데이터를 알아봅시다.
HTML의 <title>같은 페이지의 메타데이터를 수정하고 싶으면 어떻게 해야할까요?
물론 <title>또한 HTML태그의 일부이므로 Next.js에서 <head>를 수정하는 방법을 살펴보겠습니다.
메타데이터를 수정하고 싶다면 넥스트에서 제공하는 <Head>를 사용하면 됩니다.
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}이는 Third-party JS에서도 마찬가지입니다.
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}
다음으로 CSS입니다.
우선 최상위 디렉토리에 component라는 폴더를 생성한 후 layout.js를 생성합니다
export default function Layout({ children }) {
return <div>{children}</div>;
}그런다음 pages/posts/first-post.js 에서 Layout을 import합니다.
이제 구성 요소에 몇 가지 스타일을 추가해 보겠습니다 Layout. 이를 위해 React 구성 요소에서 CSS 파일을 가져올 수 있는 CSS모듈을 사용하겠습니다.
components/layout.module.css다음 내용을 포함 하는 파일을 만듭니다 .fda
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}CSS모듈을 사용하려면 CSS파일 이름이 .module.css이어야만 합니다.
components/layout.js내부에서 container클래스를 사용하려면 layout.js에서 import를 해야합니다.
import styles from './layout.module.css';
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
반면, 글로벌 스타일을 적용하려면 다음과 같습니다.애플리케이션에 전역 CSS를 로드하려면 pages/_app.js 파일을 생성합니다.
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}이 _app.js는 애플리케이션의 모든 페이지를 래핑하는 최상위 React 컴포넌트입니다. 이 컴포넌트를 사용하여 페이지 간을 탐색할 때 상태를 유지하거나 전역스타일을 추가할 수 있습니다.
그러나 다른 곳에서는 전역 CSS를 import할 수 없습니다. 이유는 pages/_app.js전역 CSS가 페이지의 모든 요소에 영향을 미치기 때문입니다.