Next.js에서는 CSS, Sass를 지원한다.<head>를 어떻게 customize 하는지CSS Modules을 사용해서 reusable React component를 만드는지https://nextjs.org/learn/basics/assets-metadata-css/assets
\n이미지와 같은 static assets을 추가하기 위해서는 public에 추가하면 된다. public/vercel.svg를 추가하고 사용하고자 하는 페이지에 아래와 같이 코드를 추가하면 된다.
<img src=\"/vercel.svg\" alt=\"Vercel Logo\" className=\"logo\" />추가로 public에는 robots.txt, Google Site Verification 을 추가해서 사용할수 있는 폴더이다.
https://nextjs.org/learn/basics/assets-metadata-css/metadata
\n<title>과 같은 HTML tag의 metadata를 수정하고 싶을때는 아래와 같이 사용해보자. <head>가 아닌 <Head>를 사용해야 한다. <Head>는 Next.js의 head 모듈을 추가해서 사용이 가능하다.
import Head from \"next/head\"\nimport Link from \"next/link\"\n\nexport default function FirstPost() {\n return (\n <>\n <Head>\n <title>First Post</title>\n </Head>\n <h1>First Post</h1>\n <Link href=\"/\">\n <a>Back to home</a>\n </Link>\n </>\n )\n}https://nextjs.org/learn/basics/assets-metadata-css/css-styling
\nstyled-jsx의 library를 사용해서 스타일링을 할 수 있다. CSS-in-JS 라이브러리는 React Component에서 CSS로 작성이 가능하도록 (다른 컴포넌트는 영향을 받지 않는다.)
Next.js는 styled-jsx, CSS-in-JS인 styled-components, emotion, Tailwaind CSS를 사용한다.
https://nextjs.org/learn/basics/assets-metadata-css/layout-component
\nLayout 컴포넌트를 생성해서 가장 바깥쪽 컴포넌트를 만들수 있다.
// components/layout.js\nexport default function Layout({ children }) {\n return <div>{children}</div>\n}\n\n// pages/posts/first-post.js\nimport Head from \"next/head\"\nimport Link from \"next/link\"\nimport Layout from \"../../components/layout\"\n\nexport default function FirstPost() {\n return (\n <Layout>\n <Head>\n <title>First Post</title>\n </Head>\n <h1>First Post</h1>\n <h2>\n <Link href=\"/\">\n <a>Back to home</a>\n </Link>\n </h2>\n </Layout>\n )\n}CSS Module은 자동으로 uqniue class names을 생성해준다. 또한 Next.js의 code splitting features은 CSS Module에서도 작동을 한다. (각 페이지에서 최소한의 CSS가 로드되도록, 결과적으로 번들 크기가 작아진다. = 빠르다)
https://nextjs.org/learn/basics/assets-metadata-css/global-styles
\nCSS Modules은 component-level sytles에 유용하다. 그러나 모든 페이지에서 일부 CSS를 로드하려면 Next.js에서도 지원을 한다. global CSS 파일들을 로드하기 위해서는 _app.js를 pages의 아래에 추가하면 된다.
export default function App({ Component, pageProps }) {\n return <Component {...pageProps} />\n}App 컴포넌트는 top-level component로 모든 다른 페이지에서 공통적으로 사용. 해당 컴포넌트를 사용해서 페이지 사이를 이동할때 상태 유지가 가능하다.
\n\n\n
pages/_app.js를 추가할때는 반드시 서버를 재시작 해야한다.
pages/_app.js를 제외하고 다른곳에서는 global CSS를 어디서도 가져올수 없으니 반드시 pages/_app.js를 사용하자. 이렇게 막아놓은 이유는 전역 CSS가 페이지의 모든 요소에 영향을 주기 때문이다.
styles의 디렉토리를 생성하고 global.css를 그 안에 생성하자.
/* styles/global.css */\n\nhtml,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,\n Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n line-height: 1.6;\n font-size: 18px;\n}\n\n* {\n box-sizing: border-box;\n}\n\na {\n color: #0070f3;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}마지막으로 ppages/_app.js에 아래와 같이 추가하면 끝
import \"../styles/global.css\"\n\nexport default function App({ Component, pageProps }) {\n return <Component {...pageProps} />\n}![https://github.com/vercel/next-learn-starter/blob/master/basics-final/public/images/profile.jpg](\"https://github.com/vercel/next-learn-starter/blob/master/basics-final/public/images/profile.jpg\"){kind=link}
images의 디렉토리를 public 디렉토리 아래 생성public/images/profile.jpg 파일을 추가components/layout.module.css.container {\n max-width: 36rem;\n padding: 0 1rem;\n margin: 3rem auto 6rem;\n}\n\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.headerImage {\n width: 6rem;\n height: 6rem;\n}\n\n.headerHomeImage {\n width: 8rem;\n height: 8rem;\n}\n\n.backToHome {\n margin: 3rem 0 0;\n}styles/utils.module.css.heading2Xl {\n font-size: 2.5rem;\n line-height: 1.2;\n font-weight: 800;\n letter-spacing: -0.05rem;\n margin: 1rem 0;\n}\n\n.headingXl {\n font-size: 2rem;\n line-height: 1.3;\n font-weight: 800;\n letter-spacing: -0.05rem;\n margin: 1rem 0;\n}\n\n.headingLg {\n font-size: 1.5rem;\n line-height: 1.4;\n margin: 1rem 0;\n}\n\n.headingMd {\n font-size: 1.2rem;\n line-height: 1.5;\n}\n\n.borderCircle {\n border-radius: 9999px;\n}\n\n.colorInherit {\n color: inherit;\n}\n\n.padding1px {\n padding-top: 1px;\n}\n\n.list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.listItem {\n margin: 0 0 1.25rem;\n}\n\n.lightText {\n color: #999;\n}components/layout.jsimport Head from \"next/head\"\nimport styles from \"./layout.module.css\"\nimport utilStyles from \"../styles/utils.module.css\"\nimport Link from \"next/link\"\n\nconst name = \"Your Name\"\nexport const siteTitle = \"Next.js Sample Website\"\n\nexport default function Layout({ children, home }) {\n return (\n <div className={styles.container}>\n <Head>\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <meta\n name=\"description\"\n content=\"Learn how to build a personal website using Next.js\"\n />\n <meta\n property=\"og:image\"\n content={`https://og-image.now.sh/${encodeURI(\n siteTitle\n )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}\n />\n <meta name=\"og:title\" content={siteTitle} />\n <meta name=\"twitter:card\" content=\"summary_large_image\" />\n </Head>\n <header className={styles.header}>\n {home ? (\n <>\n <img\n src=\"/images/profile.jpg\"\n className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}\n alt={name}\n />\n <h1 className={utilStyles.heading2Xl}>{name}</h1>\n </>\n ) : (\n <>\n <Link href=\"/\">\n <a>\n <img\n src=\"/images/profile.jpg\"\n className={`${styles.headerImage} ${utilStyles.borderCircle}`}\n alt={name}\n />\n </a>\n </Link>\n <h2 className={utilStyles.headingLg}>\n <Link href=\"/\">\n <a className={utilStyles.colorInherit}>{name}</a>\n </Link>\n </h2>\n </>\n )}\n </header>\n <main>{children}</main>\n {!home && (\n <div className={styles.backToHome}>\n <Link href=\"/\">\n <a>← Back to home</a>\n </Link>\n </div>\n )}\n </div>\n )\n}pages/index.jsimport Head from \"next/head\"\nimport Layout, { siteTitle } from \"../components/layout\"\nimport utilStyles from \"../styles/utils.module.css\"\n\nexport default function Home() {\n return (\n <Layout home>\n <Head>\n <title>{siteTitle}</title>\n </Head>\n <section className={utilStyles.headingMd}>\n <p>[Your Self Introduction]</p>\n <p>\n (This is a sample website - you’ll be building a site like this on{\" \"}\n <a href=\"https://nextjs.org/learn\">our Next.js tutorial</a>.)\n </p>\n </section>\n </Layout>\n )\n}https://nextjs.org/learn/basics/assets-metadata-css/styling-tips
\nstyling tips!
\nclassnames library to toggle classesclassnames을 쉽게 전환 할 수 있는 간단한 라이브러리로 yarn add classnames로 설치가 가능하다.
.success {\n color: green;\n}\n.error {\n color: red;\n}위를 classnames을 사용하면
import styles from \"./alert.module.css\"\nimport cn from \"classnames\"\n\nexport default function Alert({ children, type }) {\n return (\n <div\n className={cn({\n [styles.success]: type === \"success\",\n [styles.error]: type === \"error\",\n })}\n >\n {children}\n </div>\n )\n}configuration 없이 바로 사용할수 있는 Next.js는 postcss를 사용하여 CSS를 컴파일 합니다. PostCSS conifg를 커스터마ㅇ이즈 하기 위해서는 postcss.config.js를 생성하면 된다. Tailwind CSS와 같은 라이브러리를 사용하는 경우 유용하다.
아래와 같이관련된 패키지를 설치하고
\nnpm install tailwindcss postcss-preset-env postcss-flexbugs-fixespostcss.config.js를 아래와 같이 작성한다
module.exports = {\n plugins: [\n \"tailwindcss\",\n \"postcss-flexbugs-fixes\",\n [\n \"postcss-preset-env\",\n {\n autoprefixer: {\n flexbox: \"no-2009\",\n },\n stage: 3,\n features: {\n \"custom-properties\": false,\n },\n },\n ],\n ],\n}tailwind.config.js에서 purge를 이용해 사용하지 않는 CSS는 제거를 한다.
// tailwind.config.js\nmodule.exports = {\n purge: [\n // Use *.tsx if using TypeScript\n \"./pages/**/*.js\",\n \"./components/**/*.js\",\n ],\n // ...\n}Sass도 역시 임포트가 가능하다. CSS Modules을 통해 component-level Sass를 사용할 수 있다.
npm install sass