next.js初体验next.js初体验安装设置 package.json 页面路由、路由跳转内置对 CSS 的支持

react框架最主要的特性-SEO优化

一个页面右键查看源代码是空的,百度谷歌爬虫找不到内容

spa应用单页面应用首屏加载慢不能SEO

一、安装设置

npx create-next-app
yarn create next-app

npx create-next-app --typescript
yarn create next-app --typescript

二、package.json

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

三、页面路由、路由跳转

Next.js根据pages目录中的文件名进行路由设定

静态路由的页面

pages/about.js

具有动态路由的页面

pages/posts/[id].js`

路由跳转

next/router

import { useRouter } from 'next/router'
const router = useRouter()
router.push()

next/link

import Link from 'next/link'
<Link href="/">
    <a>Home</a>
</Link>

四、数据加载

Next js两种形式的预渲染:

服务端渲染（数据经常改变）

访问xx路由之前，向服务器要数据，把要回来的数据和HTML加工直接返回前台展示。

静态化（数据不变的情况下）

访问xx路由之前，向服务器请求数据，将请求来的数据和HTML加工生成真正的xxx.html文件

作用:下次访问同一个路由地址的时候，直接返回静态页面，减小服务器的压力，以达到性能优化的目的

只能在page 页面级别使用组件级别不能使用

getStaticProps（生成静态化）
getStaticPaths （生成静态路由）
getServerSideProps

getServerSideProps()-不静态化-异步async

getServerSideProps(context);

params:接收getStaticPaths()返回的动态路径，方便请求动态数据比如: http://localhost:300/detail/xxxx
req: HTTP IncomingMessage对象。
res: HTTP响应对象。
query:查询字符串。

getServeSideProps的返回值是一个对象，其中对象必有一个key值为props，并且这个props作为该组件的propsgetStaticProps()-会静态化-异步方法async

getStaticPaths（静态生成）

如果页面具有动态路由并使用 getStaticProps 它，则需要定义一个在构建时必须呈现为HTML的路径列表。
如果从使用动态路由的页面导出async调用的函数getStaticPaths，则Next.js将静态预呈现由指定的所有路径getStaticPaths。

getStaticProps({params,preview,perviewData});

在动态路由文件[xxx].js里面用
params:接收getStaticPaths()返回的动态路径，方便请求动态数据比如: http://localhost:3000/list/xxXX
getStaticProps的返回值是一个对象，其中对象必有一个key值为props，并且这个props作为该组件的props

getStaticProps

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

getStaticPaths

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } } // See the "paths" section below
    ],
    fallback: true or false // See the "fallback" section below
  };
}

getServerSideProps

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

function Page({ data }) {
  // Render data...
}

五、内置对 CSS 的支持

全局引入

_app.js
import '../styles.css'

模块引入
内联引入
jsx

  <style jsx>{`
    p {
      color: blue;
    }
    div {
      background: red;
    }
    @media (max-width: 600px) {
      div {
        background: blue;
      }
    }
  `}</style>
  <style global jsx>{`
    body {
      background: black;
    }
  `}</style>

sass

安装 npm install sass

less

www.npmjs.com/package/@ze…被弃用了 london
const withAntdLess = require('next-plugin-antd-less');
module.exports = withAntdLess({}

六、静态文件服务

Next.js 支持将静态文件（存放到根目录下的 public 目录中，并对外提供访问。public 目录下存放的静态文件的对外访问路径以 (/) 作为起始路径。

例如，如果你添加了一张图片到 public/me.png 路径，则以下代码就能访问到此图片：

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

注意：请勿为 public 改名。此名称是写死的，不能修改

七、API

next/image

import Image from 'next/image'
<Image src={profilePic} alt="Picture of the author" />

width
height
layout(改变尺寸时图片的布局行为) fill
quality 1-100
loading(加载方式) lazy（懒加载） or eager（立即出现）

注意： 如果使用的是外部 URL，则必须添加到 next.config.js 配置文件中的 domains 配置项中。

next/head

import Head from 'next/head'
<Head>
    <title>My page title</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>

八、next.config.js

webpack配置文件

九、开发当中遇到的问题(注意事项)

响应式布局无法拿到浏览器宽度(device.js）使用css后续操作
ua ipad在ios13之后，useragent里面关键字眼iPad不再包含转而替换为Macintosh这个单词 blog.csdn.net/jyb123/arti…

next.js初体验