next.js 之 Router AND Meta Title Tag设置
刚刚我们创建了index.js
从pages/里面直接编写， 并没有声明路由， 对的，从page直接读取数据， 文件名就是路径， index.js相当于 index.html。让我们摆脱了router机制。
我们编写一个my的页面吧。
Router
cd pages&mkdir my
add 内容
export default () => <div>my</div>
然后从首页跳过去
跳过去的话需要<Link> Tag
现在我们在index用Link跳到m页面： （下面附带一句官方的描述）
Client-side transitions between routes can be enabled via a <Link> component. Consider these two pages：
// pages/index.js
import Link from 'next/link'
export default () =>
<div>
index
<Link href="/my">
<a>my</a>
</Link>
</div>
Head
搞个head吧， 毕竟我们的目的是seo， 先达到这个目的再说
不过在此之前， 我们先把my页面添加一个跳回index的。
再跳回去的话， 我可不想再引入next/link， 把next的功能 都 集合在一个模块。
start
在工作区的根目录新建一个next.js， 写入
----.
导入Head的时候看下官方描述： We expose a built-in component for appending elements to the <head> of the page.
----.
import Link from 'next/link'
import Head from 'next/head'
export {
Link,
Head
}
pages/index.js修改引入方式和Head
---.
Head可以多次引入， next会自动合并。To avoid duplicate tags in your <head> you can use the key property, which will make sure the tag is only rendered once.
---.
import {Link, Head }from '../next'
export default () =>
<div>
<Head>
<title>index</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>index</p>
<Link href="/my">
<a>my</a>
</Link>
</div>
接着修改my
import {Link, Head }from '../../next'
export default () =>
<div>
<Head>
<title>my</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>my page</p>
<Link href="/">
<a>go index</a>
</Link>
</div>
这时候可以在Head里添加各自的领域添加对应的keywords跟description, 实现搜索引擎的收录。
OK
到这里完了么， 当然不是， head太繁琐了， 感觉回到了html时代， 这时候一个优秀的程序员要遵守 DRY:Don’t Repeat Yourself（不要自我重复）
ORY
修改next.js文件（有点后悔， 这个文件应该取ssrBase.js更合适一点）
import Link from 'next/link'
import Head from 'next/head'
const Head$ = ({title}) =>
<Head>
<title>{title}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
const HeadF$ = ({title}) =>
viewF$ =>
reactSate =>
<div>
{
Head$({
title
})
}
{viewF$(reactSate)}
</div>
export {
Link,
Head,
Head$,
HeadF$,
}
修改Index
import {Link, HeadF$ }from '../next'
export default HeadF$({
title: 'home'
})
(() =>
<div>
<p>index Page</p>
<Link href="/my">
<a>go to my</a>
</Link>
</div>
)
修改My
import {Link, HeadF$ }from '../../next'
export default HeadF$({
title: 'my'
})
(() =>
<div>
<p>my Page</p>
<Link href="/">
<a>go to index</a>
</Link>
</div>
)
OK
--END--
网友评论