More than 1 year has passed since last update.

Next.js の使い方 css

Next.js

Posted at 2022-05-26

次のようなページを作成します。

こちらのページを参考にしました。
Assets, Metadata, and CSS

プロジェクトの作成

yarn create next-app blog01

サーバーの起動

cd blog01
yarn dev

ブラウザーで
http://localhost:3000/
にアクセスして、デフォールトの画面が表示されることを確認。

ソースの作成

フォルダー構造

$ tree -I node_modules/
.
├── README.md
├── components
│   ├── layout.js
│   └── layout.module.css
├── next.config.js
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   ├── index.js
│   └── posts
│       └── first-post.js
├── public
│   ├── favicon.ico
│   ├── images
│   │   └── profile.jpg
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   ├── globals.css
│   └── utils.module.css
└── yarn.lock

フォルダーの作成

mkdir components
mkdir pages/posts
mkdir public/images

次のファイルは書き換えてください。

pages/index.js

import Head from 'next/head';
import Link from 'next/link';
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>栃木県下野市に住んでいます。東は、茨城県筑西市、西は栃木市、南は古河市、  北はさくら市が、行動範囲です。このあたりはサイクリングロードが充実しているので、自転車で行けます。</p>
        <p>
<Link href="/posts/first-post">
    <a>Read this page!</a>
  </Link>
        </p>
<p>May/26/2022 PM 17:38</p>
      </section>
    </Layout>
  );
}

pages/posts/first-post.js

import Script from 'next/script';
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';

export default function FirstPost() {
  return (
<Layout>
	<Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
<p>最初のポストです。</p>
<p>May/26/2022 PM 17:37</p>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
</Layout>
  );
}

components/layout.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 = 'ekzemplaro';
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={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>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">
            <a>← Back to home</a>
          </Link>
        </div>
      )}
    </div>
  );
}

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/globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

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

public/images/profile.jpg
は、何か、jpg ファイルを入れてください。

ブラウザーで
http://localhost:3000/
にアクセス

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up