Next.js （上）

创建项目

命令

• npm init next-app nextjs-blog-1
• 然后选择 Default starter app
• yarn dev
• 用浏览器打开控制台给出的网址

Link快速导航

• 官方教程在此

用法

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

优点

• 页面不会刷新，用AJAX请求新页面内容
• 不会请求重复的HTML、CSS、JS
• 自动在页面插入新内容、删除旧内容
• 因为省了很多请求和解析过程，所以速度极快

同构代码

代码运行在两端

• 在组件里写一句console.log('执行了')
• 你会发现Node控制台会输出这句话
• 你会发现Chrome控制台也会输出这句话

注意差异

• 不是所有的代码都会运行，有些需要用户触发
• 不是所有的API都能用，比如window在Node里报错

全局配置

pages/_app.js

• export default function App是每个页面的根组件
• 页面切换时App不会销毁，App里面的组件会销毁
• 可用App保存全局状态

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

function MyApp({Component, pageProps}) {
  return (
      <>
        
          {/*公共头部*/}
          
          
        
        
      
  )
}

export default MyApp

注意

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

全局CSS

放在_app.js里

• import./styles/global.css
• 因为切页面时App不会销毁
• 其他地方不能import global.css
• 其他地方只能写局部CSS

import styles from '../styles/Home.module.css'

export default function Home() {
  return (
      // styles module用法
      

        
标题一
        
段落
        
        
        {/*添加global，影响全局的样式*/}
        
      
  )
}

插曲

• 相对引用好烦，能改成import 'styles/global.css'吗？
• 看文档「Absolute lmports」章节
  创建jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

局部CSS

官方支持
默认支持 styled-jsx和CSS Modules
一般来说，简单需求用前者，复杂需求用后者我的个人偏好

其他类型文件

图片

• 配置file-loader
• 或者直接用 next-images

SVG

• 一部分可以当作图片使用
• icons/svg要当作SVG Symbols使用

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

module.exports = nextConfig

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

更多

• 自己要loader，然后配置next.config.js
• 或者看有没有人封装成next插件