Assets, Metadata, and CSS

    Polishing Layout

    So far, we’ve only added minimal React and CSS code just to illustrate concepts such as CSS Modules. Before we move on to our next lesson about data fetching, let’s polish our page styling and code.

    Update components/layout.module.css

    First, open components/layout.module.css and replace its content with the following more polished styles for the layout and profile picture:

    .container {
      max-width: 36rem;
      padding: 0 1rem;
      margin: 3rem auto 6rem;
    }
    
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .backToHome {
      margin: 3rem 0 0;
    }
    

    Create styles/utils.module.css

    Second, let’s create a set of CSS utility classes (for text styles) that can be re-used across multiple components.

    Add a new CSS file called styles/utils.module.css with the following content:

    .heading2Xl {
      font-size: 2.5rem;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.05rem;
      margin: 1rem 0;
    }
    
    .headingXl {
      font-size: 2rem;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: -0.05rem;
      margin: 1rem 0;
    }
    
    .headingLg {
      font-size: 1.5rem;
      line-height: 1.4;
      margin: 1rem 0;
    }
    
    .headingMd {
      font-size: 1.2rem;
      line-height: 1.5;
    }
    
    .borderCircle {
      border-radius: 9999px;
    }
    
    .colorInherit {
      color: inherit;
    }
    
    .padding1px {
      padding-top: 1px;
    }
    
    .list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .listItem {
      margin: 0 0 1.25rem;
    }
    
    .lightText {
      color: #666;
    }
    

    You can reuse these utility classes throughout your application, and you may even use utility classes in your global.css file. Utility classes refer to an approach of writing CSS selectors rather than a method (e.g. global styles, CSS modules, Sass, etc). Learn more about utility-first CSS.

    Update components/layout.js

    Third, open components/layout.js and replace its content with the following code, changing Your Name to an actual name:

    import Head from 'next/head';
    import Image from 'next/image';
    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.vercel.app/${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 ? (
              <>
                <Image
                  priority
                  src="/images/profile.jpg"
                  className={utilStyles.borderCircle}
                  height={144}
                  width={144}
                  alt=""
                />
                <h1 className={utilStyles.heading2Xl}>{name}</h1>
              </>
            ) : (
              <>
                <Link href="/">
                  <Image
                    priority
                    src="/images/profile.jpg"
                    className={utilStyles.borderCircle}
                    height={108}
                    width={108}
                    alt=""
                  />
                </Link>
                <h2 className={utilStyles.headingLg}>
                  <Link href="/" className={utilStyles.colorInherit}>
                    {name}
                  </Link>
                </h2>
              </>
            )}
          </header>
          <main>{children}</main>
          {!home && (
            <div className={styles.backToHome}>
              <Link href="/">← Back to home</Link>
            </div>
          )}
        </div>
      );
    }
    

    Here’s what’s new:

    • meta tags (like og:image), which are used to describe a page's content
    • Boolean home prop which will adjust the size of the title and the image
    • “Back to home” link at the bottom if home is false
    • Added images with next/image, which are preloaded with the priority attribute

    Update pages/index.js

    Finally, let's update the homepage.

    Open pages/index.js and replace its content with:

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

    Then replace [Your Self Introduction] with your self-introduction. Here’s an example with the author’s profile:

    That’s it! We now have the polished layout code and we're ready to move on to our data fetching lessons.

    Before we wrap up this lesson, let’s talk about some helpful techniques related to Next.js’s CSS support on the next page.

    Quick Review: Why are CSS Modules useful?