Next.js를 CSS Modules에 맞추기(메타데이터 설정도 포함)
20749 단어 JavaScriptNext.jsnpmjstech
절차.
① Next.js 프로젝트의 노선에components 폴더를 만듭니다.
4
$ mkdir components
② 제작된/components의 부하 레이아웃.js를 만들고 다음과 같은 내용을 기술합니다.$ touch components/layout.js
layout.jsexport default function Layout({ children }) {
return <div>{children}</div>;
}
③ 페이지 디렉토리의 임의의 js 파일에 다음 내용을 기술합니다.다음 임의의 js 파일
〜〜〜
import Layout from "../../components/layout";
〜〜〜
export default function FirstPost() {
return (
<Layout>
〜〜〜
</Layout>
);
}
}
④ 프로젝트 코스에서 스타일 of s Folder,layout을 만든다.module.css를 만듭니다.$ touch components/layout.module.css
⑤ 적응하고 싶은 css를 설명한다.공식 강좌의layout입니다.module.css에서 자주 사용하는 스타일을 미리 기술했습니다.이렇게 각 기능에 따라 기술 양식을 나누면 cssmodules에 자주 있는 것 같습니다.layout.module.css
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.headerImage {
width: 6rem;
height: 6rem;
}
.headerHomeImage {
width: 8rem;
height: 8rem;
}
.backToHome {
margin: 3rem 0 0;
}
⑥ components/layout.js에서 다음과 같이 기술합니다.Head 태그에 트위터 카드 등의 메타데이터를 설정합니다.layout.js
import Head from 'next/head'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
const name = 'Your Name'
export const siteTitle = 'Next.js Sample Website'
export default function Layout({ children, home }) {
return (
<div className={styles.container}>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta
name="description"
content="Learn how to build a personal website using Next.js"
/>
<meta
property="og:image"
content={`https://og-image.now.sh/${encodeURI(
siteTitle
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<header className={styles.header}>
{home ? (
<>
<img
src="/images/profile.jpg"
className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
alt={name}
/>
<h1 className={utilStyles.heading2Xl}>{name}</h1>
</>
) : (
<>
<Link href="/">
<a>
<img
src="/images/profile.jpg"
className={`${styles.headerImage} ${utilStyles.borderCircle}`}
alt={name}
/>
</a>
</Link>
<h2 className={utilStyles.headingLg}>
<Link href="/">
<a className={utilStyles.colorInherit}>{name}</a>
</Link>
</h2>
</>
)}
</header>
<main>{children}</main>
{!home && (
<div className={styles.backToHome}>
<Link href="/">
<a>← Back to home</a>
</Link>
</div>
)}
</div>
)
}
⑦ pages/index.js에서 다음과 같이 기술합니다.Layout 구성 요소로 렌더 요소를 모두 포장합니다.pages/index.js
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
export default function Home() {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={utilStyles.headingMd}>
<p>[Your Self Introduction]</p>
<p>
(This is a sample website - you’ll be building a site like this on{' '}
<a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
</p>
</section>
</Layout>
)
}
그렇다면 Layout 구성 요소가 가지고 있는 헤더와 메일의 요소를 계승할 수 있을 것이다!끝!
Reference
이 문제에 관하여(Next.js를 CSS Modules에 맞추기(메타데이터 설정도 포함)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yuyaamano23/articles/dcefd88978374d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)