はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Next.js】Next.jsの公式の入門をやってみた⑨

はじめに

今回は"Styling Components"をやっていきましょう。

実はこの次のレッスンはデプロイについてなので、かなり終盤に近付いてきました。
ゴールに向かって頑張りましょう!

セットアップ

前回同様引き続き使っていきます。

ページをスタイリングする

pagesフォルダのindex.jsを以下のコードのようにします。

import Layout from '../components/MyLayout.js'
import Link from 'next/link'

function getPosts () {
  return [
    { id: 'hello-nextjs', title: 'Hello Next.js'},
    { id: 'learn-nextjs', title: 'Learn Next.js is awesome'},
    { id: 'deploy-nextjs', title: 'Deploy apps with ZEIT'},
  ]
}

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      {getPosts().map((post) => (
        <li key={post.id}>
          <Link as={`/p/${post.id}`} href={`/post?title=${post.title}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
    <style jsx>{`
      h1, a {
        font-family: "Arial";
      }

      ul {
        padding: 0;
      }

      li {
        list-style: none;
        margin: 5px 0;
      }

      a {
        text-decoration: none;
        color: blue;
      }

      a:hover {
        opacity: 0.6;
      }
    `}</style>
  </Layout>
)

これがCSSのルールを書く方法になります。

ローカルホストを見ると、

f:id:hanaaaaaachiru:20190116184122p:plain

また、以下のようなコードでも同様の結果を得られます。

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      {getPosts().map((post) => (
        <PostLink key={post.id} post={post}/>
      ))}
    </ul>
    <style jsx>{`
      h1, a {
        font-family: "Arial";
      }

      ul {
        padding: 0;
      }

      li {
        list-style: none;
        margin: 5px 0;
      }

      a {
        text-decoration: none;
        color: blue;
      }

      a:hover {
        opacity: 0.6;
      }
    `}</style>
  </Layout>
)

f:id:hanaaaaaachiru:20190116185021p:plain

グローバルスタイル

コマンドプロンプトに次のコードを打ち込みましょう。

npm install --save react-markdown

そして、pagesフォルダの中のpost.jsを書き換えます。

import Layout from '../components/MyLayout.js'
import {withRouter} from 'next/router'
import Markdown from 'react-markdown'

export default withRouter((props) => (
  <Layout>
   <h1>{props.router.query.title}</h1>
   <div className="markdown">
     <Markdown source={`
This is our blog post.
Yes. We can have a [link](/link).
And we can have a title as well.

### This is a title

And here's the content.
     `}/>
   </div>
   <style jsx global>{`
     .markdown {
       font-family: 'Arial';
     }

     .markdown a {
       text-decoration: none;
       color: blue;
     }

     .markdown a:hover {
       opacity: 0.6;
     }

     .markdown h3 {
       margin: 0;
       padding: 0;
       text-transform: uppercase;
     }
  `}</style>
  </Layout>
))

そしてローカルホストを見ましょう。

f:id:hanaaaaaachiru:20190116190623p:plain

さいごに

これで"Styling Components"は終わりです!

【Next.js】Next.jsの公式の入門をやってみた⑩ - はなちるのマイノート