6.1 ページを整える
次の機能に移る前にいったんページを整えます。前回ご紹介したImageコンポーネントもここで実装していきます。
変更前ソース
実装方法
「components/layout.module.css」ファイルを次のように編集します。
.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; }
「styles/utils.module.css」を作成します。
.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; }
「components/layout.js」を編集します。Imageコンポーネントを実装して、「index.js」と「posts/first-post.js」のレイアウトを共通化しています。
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'; // ブログのタイトル // home 引数を追加 // ルート(/)のindex.jsを表示している場合、homeがtrueになる export default function Layout({ children, home }) { return ( <div className={styles.container}> {/* Head に og:image など必要なメタ情報を追加 */} <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 ? ( // ルート(/)のindex.jsを表示している場合 <> {/* Image コンポーネントを使用。priority を指定して遅延読み込みを無効にしている */} <Image priority src="/images/profile.jpg" className={utilStyles.borderCircle} height={144} width={144} alt={name} /> <h1 className={utilStyles.heading2Xl}>{name}</h1> </> ) : ( // それ以外の場合 <> <Link href="/"> <a> <Image priority src="/images/profile.jpg" className={utilStyles.borderCircle} height={108} width={108} alt={name} /> </a> </Link> <h2 className={utilStyles.headingLg}> <Link href="/"> <a className={utilStyles.colorInherit}>{name}</a> </Link> </h2> </> )} </header> <main>{children}</main> {/* ルート(/)のindex.jsを表示していない場合 Back to home のリンクを表示する */} {!home && ( <div className={styles.backToHome}> <Link href="/"> <a>← Back to home</a> </Link> </div> )} </div> ); }
「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 であることを明示的に指定 <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> ); }
動作確認
http://localhost:3000/をブラウザで開いて、次のように画像を表示したページになりました。
![](http://cz-cdn.shoeisha.jp/static/images/article/16612/16612_003.png)
http://localhost:3000/posts/first-postは上部に画像と名前、下部に「Back to home」が追加されました。今はまだページに「Back to home」が残っているので二重に表示されています。
![](http://cz-cdn.shoeisha.jp/static/images/article/16612/16612_004.png)