一篇搞懂next.js基本操作

最新推荐文章于 2024-04-23 08:46:39 发布

影风莫

最新推荐文章于 2024-04-23 08:46:39 发布

阅读量2.1k

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/weixin_50789156/article/details/122167685

版权

Next.js SSR优点

搭建轻松
自带数据同步SSR
丰富插件自己形成生态
灵活配置

create-next-app

路由

必须withRouter包裹组件，才能获取{router}，只能通过router.query获取参数

生命周期

routerChangeStart 路由变化之前触发
routeChangeComplete 路由变化完成触发
beforeHistoryChange 在改变浏览器history之前触发
routeChangeError 路由跳转时发生错误时触发
hashChangeStart hash开始跳转时触发
hashChangeComplete hash跳转完成时触发

静态方法getInitialProps

xiaojiejie.getInitialProps = async()=> {
  // 请求数据
}

在style jsx中编写css

注意css文件在next.js不支持import引入，而需要在style jsx下编写

function kang(){
  return (
    <>
      <button>康</button>
      <div className="kang">康</div>
      <style jsx>
        {
        `
          .kang{color:red}
        `
        }
      </style>
    </>
  )
}
export default kang

建议看文档，最新版的next和旧版外部引入css不一样

https://www.nextjs.cn/docs/basic-features/built-in-css-support

异步加载模块和组件

异步加载模块 import()函数
异步加载组件 next下的dynamic模块

import React,{useState} from 'react'

import dynamic from 'next/dynamic'
// 异步加载组件 dynamic
const One = dynamic(import('../components/one'))
function Time() {
  const [nowTime,setTime] = useState(Date.now())

  const changeTime = async () => {
    // 异步加载模块 import
    const moment = await import('moment')
    setTime(moment.default(Date.now()).format())
  }
  return (
    <>
      <div>显示时间为：{nowTime}</div>
      <One></One>
      <div>
        <button onClick={changeTime}>改变时间格式</button>
      </div>
      
    </>
  )
}

export default Time

next下的head

import Head from 'next/head'
const MyHeader = () => {
  return (
    <>
      <Head>
        <title>Kangshenglone.top</title>
      </Head>
    </>
  )
}

export default MyHeader

yarn start 和yarn dev的区别

yarn dev是在开发环境下运行
yarn start是在线上环境运行

在next.js引入antd框架

12.0.7版本下的next.js，在全局_app.js(没有自己创建)引入样式

import 'antd/dist/antd.css'
export default App

坑

next的Link只支持一个标签
css引入看官方文档
用来hooks函数export抛出名必须大写

影风莫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一篇搞懂next.js基本操作

Next.js SSR优点搭建轻松自带数据同步SSR丰富插件自己形成生态灵活配置create-next-app路由必须withRouter包裹组件，才能获取{router}，只能通过router.query获取参数生命周期routerChangeStart 路由变化之前触发routeChangeComplete 路由变化完成触发beforeHistoryChange 在改变浏览器history之前触发routeChangeError 路由跳转时发生错误时触发hashCha
复制链接

扫一扫