如何加強網站的SEO - 框架篇

相信很多人看到上一篇文章大概都嚇壞，甚至打退堂鼓了
心裡開始想：什麼？難道要做SSR是這麼複雜的事情？
其實任何的方式都可以簡單也可以複雜，只是你有沒有選擇對的工具和方法
之前已經有很多人注意到了這點，所以框架的框架也誕生了

SEO全系列文章

📌 如何加強網站的SEO - 基礎篇
📌 如何加強網站的SEO - 進階篇
📌 如何加強網站的SEO - SSR與CSR篇
📌 如何加強網站的SEO - 同構篇
📌 如何加強網站的SEO - 框架篇
📌 如何加強網站的SEO - 資安篇

什麼是框架的框架

大家熟知的框架當然就是React和Vue
我們都知道這兩個都是開發前端網頁很有名的框架
但是有團隊非常熱心的開發了框架的框架，加速和解決大家開發程式所遇到的問題
因此之後就有了Nextjs與Nuxtjs，以下帶大家了解

為什麼需要Nextjs

讓我們來看看官方的這段話

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Nextjs解決了以往的開發體驗，解決很多開發者時常遇到的問題，當然也包含了SSR的問題。
這邊我也要澄清一點，框架的誕生並非只是為了解決SSR，而是為了解決開發者遇到的種種問題而誕生的。
只是Next能夠節省很多開發SSR的時間和問題，因此通常會是做SSR的首選。

官方另外在網站上列出了很多優點，這些就請各位慢慢看了。

如何使用

根據官方文件的方式
安裝步驟也很簡單

安裝
1
npm install next react react-dom

設置package.json的開發指令

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

啟動觀看
輕鬆輸入指令，即可觀看
使用方式可參考官方寫法：

1
2
3

dev - Runs next dev which starts Next.js in development mode
build - Runs next build which builds the application for production usage
start - Runs next start which starts a Next.js production server

在開發的時候，建議使用dev

撰寫components

根據官方的寫法，資料夾相當於網址的路徑，例如：pages
下面的範例，你可以嘗試放在pages：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

之後到localhost即可查看結果
這樣就完成了，非常簡單

路徑

上面提到的資料夾相當於路徑的問題，這邊列出官方文件的介紹

Index routes
其實跟前端框架開發一樣，在指令的資料夾放index.js即可視為指定路徑的主頁

The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

範例：

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

Nested routes
這裡要表示的就是巢狀路徑的概念而已

The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

範例：

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/blog/example" as="/blog/hello-world">
          <a>To Hello World Blog post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

Dynamic route segments
如果你想要用動態路徑，則需要使用方括號的語法來匹配

To match a dynamic segment you can use the bracket syntax. This allows you to match named parameters.

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

範例：

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/blog/[slug]" as="/blog/hello-world">
          <a>To Hello World Blog post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home