1，React ，React-dom 服务器渲染

2，Next 框架使用

Next 是 约定大于配置

2.1）安装 next 或 next cli

全局安装 create-next-app ：npm i -g create-next-app

创建项目：create-next-app <项目名称>

2.2）react的组件写法

vscode插件：快速生成react代码插件 - ES7 React/Redux/GraphQL/React-Native snippets

  • 简单的页面可以使用无状态js文件组件 —— 无状态就是没有数据
  1. export default () => (
  2.   <div>Welcome to next.js ---- !</div>
  3. )
  • 有状态的使用原生的react写法
  1. import React, { Component } from 'react';
  3. export default class list extends Component {
  4.   state = {
  5.     list: ['111,', '222', '333']
  6.   }
  7.   render() {
  8.     return (
  9.       <div>
  10.         <ul>
  11.           {
  12.             this.state.list.map(item => (
  13.               <li> {item}</li>
  14.             ))
  15.           }
  16.         </ul>
  17.       </div>
  18.     )
  19.   }
  20. }

2.3）使用css

视频里面需要使用的next/css的npm包，但是这个是之前的版本，最新的next内置支持了css

新的next使用css的方法是，参考youtobe的视频 index.module.css文件的方法

  1. 全局的css —— 修改 global.css 文件
    在 _app.js的所有页面的入口会引入了global.css
    这个css的样式在全局可以生效的意思是，在component文件的小组件可以使用，在pages的页面文件中也可以使用
  2. 模块的css —— home.module.css 设置对应的页面或组件的css，然后设置classname
    可以看到在index.js 主页面中使用了home的css —— 注意：组件的css文件必须设置 class 或者 id，不能是纯的html 标签
    ```javascript import styles from ‘../styles/Home.module.css’

home page 

  2. 3.  另外一个视频使用了 css-in-js 的写法，把css写在了 html的内联中<br />但是next 官网文档说明这样的方法不能使用于服务器渲染，且仅支持js（所以不支持ts）<br />目前还是不要使用这种方法 —— 因为我当前看的ssr（服务器端渲染，而那个视频只是教next使用，而没有限制是next的ssr使用） 
  4. <a name="520151e5"></a>
  5. #### 2.4）使用head
  7. 全局head ：可以在根组件定义 head，使用next自己的head去定义head
  9. 局部的head：可以在各组件页面中引入next/head 去 设置专属的 head
  11. ```jsx
  12. import Head from 'next/head'
  14. <Head>
  15.     <title>Create Next App</title>
  16.     <meta name="description" content="Generated by create next app" />
  17.     <link rel="icon" href="/favicon.ico" />
  18. </Head>

2.5）动态导入-dynamic import

动态导入组件，类似于懒加载，就是到用的时候，才导入 —— Lazy loading

原因：如果在文件的顶部import 就是在代码一开始的时候同步加载成功才能运行后边的代码，但是如果这个组件不影响业务，只是加载慢点，就不需要组件同步的加载，可以在代码运行到的位置才加载，这个就可以使用 Next的 dynamic import

另外：只有使用 import 导入的组件，才能适用于webpack打包的形式

  1. 异步加载外部库
  1. // import moment from 'moment';
  2. import React, { useState } from 'react';
  4. export default function Time() {
  5.   const [nowTime, setTime] = useState(Date.now())
  6.   const changeTime = async () => {
  7.     // setTime(moment(Date.now()).format())
  9.     const moment = await import('moment')
  10.     setTime(moment.default(Date.now()).format())
  11.   }
  12.   return (
  13.     <>
  14.       <div>显示时间为：{nowTime}</div>
  15.       <button onClick={changeTime}>改变格式</button>
  16.     </>
  17.   )
  18. }

2.6）next 路由

  1. Link 跳转（ 或a标签跳转）
    ```javascript import Link from ‘next/link’

const Navbar = () => { return (

Jean Jean
) }

  2. 2.  动态路由跳转（编程路由跳转）<br />pages/products/[name.js]<br />可以做一个动态路由，然后在getStaticPaths 可以拿到路由参数，配置到url里面<br />然后在 getStaticProps 里面可以根据不同的路由参数在发起请求拿到路由对应的数据 
  3. 3.  路由遮盖 —— 使用 as 关键字 
  5. <a name="2c3f6596"></a>
  6. #### 2.7）Image 图像
  8. 1. Image基本使用
  10. 在next 不能直接使用 img 属性，需要使用next/ image的组件
  12. 在设置image 的 src的时候，需要给图片设置 width height 和 layout ，否则就会报错
  14. 同时 设置了 layout = fill 的时候，还需要配合 objectFit = cover使用 同时需要给父元素设置 position: relative;
  16. 如果不设置 objectFit，图片有点扭曲，如果设置后，图片可以正常缩放
  18. 2. 从内部获取的 静态文件 图片 可以直接 把资源放在 public 文件夹下，然后导入
  20. ```html
  21. <div className={styles.media}>
  22.     {service.video ? (
  23.     <video src={`/img/${service.video}`} 
  24.            width='100%' 
  25.            height='100%' 
  26.            objectFit='cover'
  27.            autoPlay 
  28.            loop
  29.            muted
  30.            />
  31.     ) : (<Image src={`/img/${service.photo}`} width='100%' height='100%' layout='responsive' objectFit='cover' />)
  32.     }
  33. </div>
  1. 如果是外部服務器獲取到的圖片，需要配置 next.config.js （修改配置需要重啟服務器）
  1. const nextConfig = {
  2.   reactStrictMode: true,
  3.   images: {
  4.     domains: ['images.pexels.com']  // 配置圖片來源的服務器域名
  5.   }
  6. }
  8. module.exports = nextConfig

2.8）获取数据

  1. 使用getStaticProps 的钩子调用获取数据的函数
    这个框架就是可以先调用这个 getStaticProps 的钩子，然后才渲染页面 —— 这个是服务端渲染
    如果是客户端 —— 就是先渲染HTML，然后才调用请求数据的生命钩子
    这个是客户端和服务器最主要的区别
  2. 发现在 getStaticProps 的钩子里面打印是在 服务器端，但是在 render 里面打印的数据在 浏览器端
    ```javascript export default function Maizuo({ services}) { console.log(‘services’, services); // 打印在浏览器端 return (
    maizuo
    ) }

export const getStaticProps = async () => { const res = await axios.get(‘https://m.maizuo.com/gateway‘) console.log(‘res —-‘, res); // 打印在服务器端 const services = res.data return { props: { services, } } }

  2. 3.  getStaticProps 和 getStaticPaths 的区别 
  4. `getStaticPaths`首先被调用。您将返回一些选项和一组参数以输入到`getStaticProps`。
  6. 然后对从`getStaticPaths`返回的每一组参数调用一次`getStaticProps`。这一步也同时发生，以加速构建。
  8. ```javascript
  9. // pages/posts/[id].js  —— next 官网实例
  11. function Post({ post }) {
  12.   // Render post...
  13. }
  15. // This function gets called at build time
  16. export async function getStaticPaths() {
  17.   // Call an external API endpoint to get posts
  18.   const res = await fetch('https://.../posts')
  19.   const posts = await res.json()
  21.   // Get the paths we want to pre-render based on posts
  22.   const paths = posts.map((post) => ({
  23.     params: { id: post.id },
  24.   }))
  26.   // We'll pre-render only these paths at build time.
  27.   // { fallback: false } means other routes should 404.
  28.   return { paths, fallback: false }
  29. }
  31. // This also gets called at build time
  32. export async function getStaticProps({ params }) {
  33.   // params contains the post `id`.
  34.   // If the route is like /posts/1, then params.id is 1
  35.   const res = await fetch(`https://.../posts/${params.id}`)
  36.   const post = await res.json()
  38.   // Pass post data to the page via props
  39.   return { props: { post } }
  40. }
  42. export default Post
  1. getServerSideProps（Server-side Rendering) 是用来干什么的
  • 目前遗留的一个问题1，getStaticPorps只能在 pages里面获取数据，但是如果layout组件里面需要请求数据应该如何获取（类似一个问题，如果是页面渲染之前就需要的数据应该如何先获取）
  • 遗留问题2，已经知道的是父子组件传值，如果涉及子传父值怎么处理，兄弟之前传值怎么处理，react有redux，那next有什么？