Next.js 上

Next.js的背景

开发团队是zeit

zeit团队水平如何？看看这篇知乎上的答案https://www.zhihu.com/question/59278159/answer/813629215

后来团队改名为Vercel。

简而言之，一个高中开始编程的，会做平面设计的复旦大学计算机专业毕业生，在微软工作过一年后，加入了zeit团队。

几乎每一个同事都有非常强大的背景.

Next.js核心团队四个人平均年龄20岁

按star数，zeit是Github组织的Top20

全员远程工作

Next.js的定位

Next.js不是一个前端框架也不是一个后端框架，而是一个全栈框架，即有了这个框架前后端的事情它都能做。比如

CSS-in-JS
页面预渲染+SSR（服务端渲染）
前后端同构（代码同时运行在两端）
Node.js版本在10.13以上
支持React和TypeScript

弱项

完全没有提供数据库相关功能，可自行搭配Sequelize或TypeORM

完全没有提供测试相关功能，可自行搭配Jest或Cypress

有一个叫做Blitz.js的框架在这些方向上努力

谁在用Next.js

国内

腾讯网手机版，和Teambition

国外

Netflix Jobs, Twitch手机版，Hulu，TikTok抖音海外版，漫威官网，Material UI官网

总结

国外用的比较多，国内用得少，那么国内学这个好找工作吗

学Next.js好找工作吗

方方的思考

国内一般招聘偏后端的前端，这样企业就可以省去招一个纯后端，国内市面上纯Node后端的需求和前端的比的话要少很多很多，可以去拉勾网上看。

Next.js切合了SSR，Serverless等技术热点。

支付宝的Umi是一个类Next.js框架，说明被认可

Next.js背后的团队方方非常欣赏。

饥人谷已经教了express和koa，完全可以自行掌握egg.js

综上

进可往技术热点靠，退可回到egg.js

Next.js全解

一节课搞清核心技术

使用Next.js做博客系统

官方教程

官网入门教程就是做博客系统（饥人谷的教程略有删改）

需求

我们对博客系统的需求足够了解，不需要再讨论

难易程度

非常简单，易于学习

创建项目

命令

2023年更新：

用以下代码创建博客示例

npx create-next-app nextjs-blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

~~我用的是Mac Mini，实际安装的时候和方方上课演示的略有出入~~

npm init next-app nextjs-blog-1
y
cd nextjs-blog-1
npm run dev

用浏览器打开控制台给出的网址，默认是http://localhost:3000

CRM学习法，将贯穿整个学习过程

CRM

改内容

把welcome to 改成Hello

加页面

创建pages/posts/first-post.js

如何访问这个页面？

~~路径为/posts/first-post~~

~~⚠️如果无法访问的话直接重启服务即可~~

export default function FirstPost() {
  return <h1>First Post</h1>;
}

新的版本是把页面放在pages的文件夹下，任何创建的页面都可以显示

比如pages/first-post.js, 在localhost:3000/first-post就可以显示。

如果要创建/authors/me，应该放在pages/authors/me.js下，并且一定要export，这样页面就可以显示出来。

总结

Nextjs的理念借鉴了Rails的理念，约定大于配置，不需要配置，只需要约定，开发者自然意会

npm add --include=dev @types/react @types/react-dom
//在webstrom里面安装这个，但是webstrom没有更智能的提醒

Link快速导航

官方教程在此

用法

把<a href=xxx>点击跳转</a>改成

<Link href=xxx><a>点击跳转</a></Link>

优点

为什么要用Link？

页面不会刷新，用AJAX请求新页面内容

不会请求重复的HTML、CSS、JS

自动在页面插入新内容、删除旧内容

因为省了很多请求和解析过程，所以速度极快

Link快速导航借鉴了Rails Turbolinks，pjax等技术

同构代码

同构代码的意思就是你的代码会同时在浏览器和NodeJs运行

代码运行在两端

在组件里写一句console.log("执行了")

你会发现Node控制台会输出这句话

你会发现Chrome控制台也会输出这句话

注意差异

不是所有的代码都会运行，有些需要用户触发,比如onClick

export default function X(){
    const clickMe = useCallback(()=>{ //使用useCallback仅在第一次被调用
   console.log('you clicked me')
    },[])

    return (
        <div>First Post <button onClick={clickMe}>click me</button>
        <hr/>
            回到首页 <Link href="/">点击这里</Link>
        </div>
    )
}

不是所有的API都能用，比如window在Node里报错,因为window只在浏览器里支持，并不在Node里支持，运行在两端必须两边都支持。

小结

创建项目

npm init next-app 项目名

快速导航

包住同构代码一份代码，两端运行（省了一份）全局配置

官方教程：https://nextjs.org/learn/basics/assets-metadata-css

自定义

全局CSS

局部CSS

自定义

使用

改各页面title

import Head from "next/head";

<Head>
        <title>First post</title>
</Head>

<React.Fragment></React.Fragment> => <></>

那是不是每一页都需要单独写一个title？

改各页面meta:viewport

疑问

那怎么改全局title和meta:viewport呢

全局配置

pages/_app.js

export default function App是每个页面的根组件

页面切换时App不会销毁，App里面的组件会销毁

可用App保存全局状态

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
//这里的Component就是页面中定义的index.js和first-post.js,Component会把pageProps里的的选项都加进去

import '../styles/globals.css'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return <div className="frank">
    <Head><title>我的博客-Frank</title></Head>
    <Component {...pageProps} /></div>
}

export default MyApp

如果在_app里面添加Head和title，除非原始页面添加了Head和title，否则会使用_app里的Head和title, 首页的head和title还是按照layout.js里的为准
~~更新完~~_app~~需要重启服务才能生效~~

注意

~~创建_app.js之后需要重启yarn dev~~

全局CSS

放在_app.js里

import '../styles/global.css'
//这个引入到first-post里面可行

因为切页面时App不会销毁

其他地方不能import global.css

其他地方只能写局部CSS

插曲

相对引用好烦，能改成import 'styles/global.css'吗

看文档Absolute Imports章节

局部CSS

style jsx

<style jsx>{`
  h1{
    color:red;
  }
  `}
  </style>

这种写法模仿Vue的单文件组件标签

在单独页面上使用style jsx标签不会产生冲突，就是因为单文件组件标签

这里推荐了一个Webstrom的插件叫Styled Components & Styled JSX,我看了下我的webstrom已经安装了

下面的代码还可以影响全局变量(尽量别用)

<style jsx global>{`
body{
background:red;
}`
 }</style>

引入全局文件时路径产生错误怎么解决？

可以通过配置解决这个问题，官方文档: Absolute Imports and Module path aliases

根目录创建一个文件名为jsconfig.json,在文件中放入以下代码

 {
 "compilerOptions":{
 "baseUrl":"."//这里表示从当前目录开始
 }
 }

CSS Modules

如何使用CSS Modules？

在styles文件夹下创建一个以.module.css结尾的文件

//first-post.module.css
.wrapper{
    background: red;
    border: 1px solid black;
}

.content{
    padding: 10px;
}

在文件中引入这个文件

import styles from 'styles/first-post.module.css'

使用的时候如下添加

 <div className={styles.wrapper}>
 	<div className={styles.content}>
     内容
  </div>
 </div>

官方支持

默认支持styled-jsx和CSS Modules

一般来说，简单需求用前者，复杂需求用后者

我的个人偏好

styled-jsx不方便分离CSS和JS

CSS Modules用起来太麻烦

我更喜欢styled-components，后面有机会再改

使用SCSS

安装依赖

yarn add sass

直接用

把后缀.css改为.scss即可

静态资源

next推荐放在public/里，方方不是很赞同

因为，放在public/里不支持改文件名

其他类型文件

图片

配置file-loader

下面这个代码我实际配置的时候不起作用，能print出来，但是还是不显示图片。 Screen Shot 2022-01-09 at 7.27.37 PM

//next.config.js
module.exports = {
  webpack: (config, options) => {
    const isServer = options.isServer
    config.module.rules.push({
      test: /\.(png｜jpg|jpeg|gif|svg)$/,
      use: [
        {
          loader:'file-loader',
          options:{
            name:'[name].[contenthash].[ext]',
            outputPath:'static',//硬盘路径
            publicPath:'_next/static'//网站路径
          },
        },
      ],
    })
    return config
  },
}

或者直接用next-images

next-images github

npm install --save next-images

安装完成之后还是报错

TypeError: unsupported file type: undefined after update to v.11

解决方案参考这篇帖子：https://stackoverflow.com/questions/68008498/nextjs-typeerror-unsupported-file-type-undefined-after-update-to-v-11

就是禁用static image

最后成功的代码

const withImages = require('next-images')

module.exports = withImages({
  webpack(config, options){
    return config
  },
  images: {
    disableStaticImages: true
  }
})

SVG

一部分可以当作图片使用

icons/svg要当作SVG Symbols使用

目前没有插件，只能自己配置

自己要loader，然后配置next.config.js

或者看有没有人封装成next插件

总结

创建项目
- npm init next-app 项目名
快速导航
- <Link href=xxx>包住<a>
同构代码
- 一份代码，两端运行
全局组件
- pages/_app.js
自定义head
- 使用组件
全局CSS
- 在_app.js里import
局部CSS
- <style jsx>
- <style jsx global>不推荐
- xxx.module.css
SCSS
- 安装sass依赖即可

WebStorm技巧

安装@types/xxx

可以使WebStorm对xxx的提示更加智能

因为会自动匹配TypeScript类型和JS源码

VSCode支持吗

好像也支持，可以自行尝试

目前还是皮毛，最重要、最难懂的请看下节课

上一页Next.js全解下一页Next.js 下

最后更新于2年前

这有帮助吗？

Next.js 上

Next.js的背景

开发团队是zeit

Next.js的定位

弱项

谁在用Next.js

国内

国外

总结

学Next.js好找工作吗

方方的思考

综上

Next.js全解

使用Next.js做博客系统

官方教程

需求

难易程度

创建项目

命令

CRM

改内容

加页面

总结

用法

优点

同构代码

代码运行在两端

注意差异

小结

创建项目

快速导航

自定义

使用

疑问

全局配置

pages/_app.js

注意

全局CSS

放在_app.js里

插曲

局部CSS

style jsx

CSS Modules

官方支持

我的个人偏好

使用SCSS

安装依赖

直接用

静态资源

其他类型文件

图片

SVG

更多

总结

WebStorm技巧

安装@types/xxx

VSCode支持吗