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.
First, we’ll be using your profile picture for the final design.
.jpg
format (or use this file).images
directory inside of the public
directory.profile.jpg
in the public/images
directory.public
directory.components/layout.module.css
Second, 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; } .headerImage { width: 6rem; height: 6rem; } .headerHomeImage { width: 8rem; height: 8rem; } .backToHome { margin: 3rem 0 0; }
styles/utils.module.css
Third, let’s create a set of utility CSS classes for typography and others that will be useful across multiple components.
Let’s 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: #999; }
components/layout.js
Fourth, open components/layout.js
and replace its content with the following code, change Your Name
at the top to your name:
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> ) }
Here’s what’s new:
meta
tags (like og:image
), which are used to describe a page's contenthome
prop which will adjust the size of the title and the imagehome
is false
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 in place to move onto 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?