前端框架 Nextjs 实现React SEO优化 SSR_nextjs seo_Dragon Wu的博客

二、路由的使用

Nextjs里的路由相对于传统ReactRouter路由更能满足SEO优化的需求，通过路径来进行路由更能被搜索引擎收录。

1、静态路由

pages目录下的.tsx文件都能被浏览器直接访问到：

localhost:3000

localhost:3000/ Two

可以直接被访问到。

2、动态路由

与传统路由不同的是，动态路由需先创建一个目录，再到目录下创建传参文件，如下：

相当于localhost:3000/user/:id这个id可以动态改变，都可以访问到对应的文件。

3、Link路由跳转

Link标签相当于传统H5里的a标签

如：完成动态路由的跳转

import Link from "next/link";
import styles from "../styles/Home.module.css";
export default function Home () {
    return (
        <div className={styles.container}>
                    [1, 2, 3, 4, 5].map(
                        (id) => (
                            <li key={id}><Link href={`/user/${id}`}>user {id}</Link></li>
4、Api路由 
import type { NextApiRequest, NextApiResponse } from 'next'
interface Apple{
    name:string
export default function apple(
    req: NextApiRequest,
    res: NextApiResponse<Apple>
    res.status(200).json({ name: 'Apple' })
5、Api动态路由  
import type { NextApiRequest, NextApiResponse } from "next";
interface Fruit {
    name: string
export default function fruit (
    req: NextApiRequest,
    res: NextApiResponse<Fruit>
    res.status(200).json({ name: "水果" + req.query.id });
三、Nextjs中加载js脚本 
创建你的js脚本到public目录： 
 页面中引入并使用Script标签： 
import styles from "../styles/Home.module.css";
import Script from "next/script";
export default function Home () {
    return (
        <div className={styles.container}>
            <Script src={"/js/a.js"} />
            <h1>Home</h1>
效果如下："/"代表从public目录下开始 
 值得注意的是这样的js脚本都是在页面最好执行的。 
 也可以通过添加属性使其先渲染： 
参考：nextjs.cn/docs/basic-features/script 
<Script src={"/js/a.js"} strategy="lazyOnload"/> 
四、Nextjs中加载图片 
 参考：基本特性: 图片优化 | Next.js | Next.js中文网 
五、Nextjs的公共布局 
创建公共文件 
import React, { PureComponent, ReactNode } from "react";
interface IProps{
    children?:ReactNode
class Layout extends PureComponent <IProps>{
    render () {
        return (
                layout
                {this.props.children}
export default Layout;
也可以这样写： 
 在入口文件或对应组件上添加父类标签： 
我这里在入口组件中添加：所有页面都会有改组件显示 
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from "../components/Layout";
export default function App({ Component, pageProps }: AppProps) {
  return (
      <Layout>
          <Component {...pageProps} />
      </Layout>
 参考：基本特性: Layouts | Next.js | Next.js中文网 
六、Pages的其他特性 
见： nextjs.cn/docs/basic-features/pages
                    Nextjs里的路由相对于传统ReactRouter路由更能满足SEO优化的需求，通过路径来进行路由更能被搜索引擎收录。相当于localhost:3000/user/:id这个id可以动态改变，都可以访问到对应的文件。参考：nextjs.cn/docs/basic-features/script。见： nextjs.cn/docs/basic-features/pages。值得注意的是这样的js脚本都是在页面最好执行的。效果如下："/"代表从public目录下开始。如：完成动态路由的跳转。
				下一个SEO
 Next SEO是一个插件，可使您在Next.js项目中更轻松地管理SEO。
 拉取请求非常受欢迎。 如果您正在寻找添加内容的灵感，还请确保检查出有关功能请求的问题。
 想要支持这个免费插件吗？
NextSeo工作原理是将其包含在您要添加SEO属性的页面上。 一旦包含在页面上，您就可以向其传递带有页面SEO属性的配置对象。 这可以在页面级别动态生成，或者在某些情况下，您的API可能返回SEO对象。
首先，安装它： 
npm install --save next-seo
yarn add next-seo
将SEO添加到页面
然后，您需要导入Next
 让我们从一个基本用法的最小示例开始：
 import React from 'react' ;
import SEO from '@americanexpress/react-seo' ;
const MyModule = ( ) => (
      title = "Lorem Ipsum"
      description = "Lorem ipsum sat delor."
      keywords = { [ 'foo' , 'bar' ] }
      siteUrl = "http://exampl
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch('https://...');
  const categoryList = await res.json();
提醒：单页面程序seo优化不好
服务器渲染网站，seo好做（动态title、description等）
SEM，Search Engine Marketing 搜索引擎营销。
SEM的直接理解：在例如 google、百度这样的搜索引擎上，会产生基于关键词的搜索。所有基于关键词的搜索结果页面上进行的营销，都可以叫做SEM。
SEO，Search Engine Optimization 搜索引擎优化。
是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，提升网页在搜
				在过去一年的工作中我所使用的js框架是Next.js,尽管这个框架在前后端同构方面有着绝佳的体验，但是当页面js文件过大以及preload过多的时候还是会出现页面跳转卡顿和渲染阻塞等比较糟糕的用户体验问题。由于我之前既不知道这个框架的工作原理，自然也就不知道如何去优化它。乘着农历春节前工地活少所以稍微研究一下。
第一个问题：宣称前后台同构的Next.js为何会出现卡顿现象？
Next.js 中的特有生命周期hook 函数 getInitialProps会在页面渲染的时候判断浏览器是否为首次渲染，如果是则是服务端渲染网页，如果不是则是客户端渲染。在页面首次渲染的时候，会加载 commons.x