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

はじめに

今回は”Clean URLs with Route Masking”をやっていきましょう！

セットアップ

いつも通りに前回の続きを使っていきます。

ルートマスキング

ルートマスキングはNext.jsの独自の機能です。
アプリで見る実際のURLとは異なるブラウザ上のURLを表示することができる機能です。

ブログの投稿URLにルートマスクを追加しましょう。

pagesフォルダにindex.jsを書き換えましょう。

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

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink id="hello-nextjs" title="Hello Next.js"/>
      <PostLink id="learn-nextjs" title="Learn Next.js is awesome"/>
      <PostLink id="deploy-nextjs" title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

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

f:id:hanaaaaaachiru:20190115205030p:plain