前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Next.js学习

Next.js学习

作者头像
biaoblog.cn 个人博客
发布2022-08-11 18:52:45
1.7K0
发布2022-08-11 18:52:45
举报

1.自动创建项目:

使用脚手架前,需要先进行全局安装。

代码语言:javascript
复制
npm install -g create-next-app

npx 是Node自带的npm模块 低版本的node没有所以需要安装

代码语言:javascript
复制
$npm install -g npx

到指定盘符下创建项目:

代码语言:javascript
复制
$npx create-next-app next-create

启动项目:

代码语言:javascript
复制
$npm run dev

2.在next中创建组件:(在page目录下)

代码语言:javascript
复制
function Biaoge(){
return (<button>彪哥</button>)
}
export default Biaoge;

3.创建路由

在page目录下创建js,page相当于是一个根目录。

举例:在page下创建一个biao.js的文件 访问路径为:localhost:8080/biao

4.路由跳转传参和接收参数以及jsx方式使用css样式

传递参数

 // 引入Router 使用Router.push

代码语言:javascript
复制
 import Router from 'next/router'

   // 引入页面跳转的组件 link

   // 两种跳转的方式 第一种Link 第二种Router.push('/')

代码语言:javascript
复制
    import Link from 'next/link'
    function goAPage(){
      Router.push('/pageA')
    }
    function goClor(){
      var color = document.getElementById('color').value
      // 通过对象的形式传递参数传递参数
      // next暂时只支持query形式传参
      // 也可以Router.push(/color?name=color)
      // 也可以通过标签传参 href="/color?name=color" 
      // href={{pathname:'/color',query:{name:color} } }
      Router.push({
        pathname:'/color',
        query:{
          name:color
        }
      })
    }
    return(
      <div>
        <div>我是首页</div>
        {/* link里面标签需要用一个a标签嵌套 */}
        <button><Link href="/pageA"><a  target="_blank">我是a页面</a></Link></button>
        <button><Link  href="/pageB"><a target="_blank">我是b页面</a></Link></button>
        <button onClick={goAPage}>我来试试编程式路由跳转</button>
        <p>请选择一个颜色吧 
          <select onChange={goClor} id="color">
            <option vlaue="yellow">黄色</option>
            <option vlaue="green">绿色</option>
            <option vlaue="white">白色</option>
          </select>
        </p>

        <div>
        </div>
        <Time></Time>
        <TestUi></TestUi>
      </div>
    )
    }
接收参数:
代码语言:javascript
复制
//withRouter是Next.js框架的高级组件,用来处理路由用的
import { withRouter } from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import React,{useState} from 'react'
//Router是携带query参数的对象
// 1.1 data是 getInitialProps 返回的res.data
 function Color({router,data}){
     const [color,setColor] = useState('green')
     const ChangeColor = ()=>{
        setColor(color==='green'?'red':'green')
     }
    return(
        <div>
            你选择了 {router.query.name}
            <br/>
            <Link href="/"><a>返回首页</a></Link>
            <ul>
                {data.message.map((item,index)=>{
                    return(
                    <div key={index}>
                        <span>{item.date}</span>   
                        <li>{item.say}</li>
                    </div>
                    )
                })}
            </ul>
            <p><button onClick={ChangeColor}>改变颜色</button></p>
            {/* 在jsx中使用样式 并动态改变样式*/}
            <style jsx>
                {
                    `
                        div{color:${color}}
                    `
                }
            </style>
        </div>
    )
}
Color.getInitialProps = async ()=>{
    const promise =new Promise(resolve=>{
        axios.get('http://118.24.223.144:3000/blogData/mood')
             .then(res=>{
                console.log(res)
                resolve(res)
            })
    })
    // 1 这里 返回的是一个接口 返回值对象
    return await promise
}
//此处填坑 需要暴露withRouter 并把组件放进去
export default withRouter(Color)

5.路由的6个钩子函数:

代码语言:javascript
复制
    // routerChangeStart路由发生变化时
    Router.events.on("routeChangeStart",(...args)=>{
      console.log(...args)
    })
    // routerChangeComplete路由结束变化时
    Router.events.on("routeChangeComplete",(...args)=>{
        console.log(...args)
    })
    // beforeHistoryChange浏览器history触发前
    Router.events.on('beforeHistoryChange',(...args)=>{
      console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
    })
    // routeChangeError路由跳转发生错误时
    Router.events.on('routeChangeError',(...args)=>{
      console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
    })
    // 还有两种事件都是针对hash的
    Router.events.on('hashChangeStart',(...args)=>{
      console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
    })
    Router.events.on('hashChangeComplete',(...args)=>{
      console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
    })

6、模块懒加载

代码语言:javascript
复制
import React, {useState} from 'react'

//时间格式化组件 需要下载

代码语言:javascript
复制
import moment from 'moment'

//1.为了优化项目,可以使用Lazy Loading模块懒加载(类似于按需加载 当我们作的应用存在首页打开过慢和某个页面加载过慢时,就可以采用Lazy Loading的形式,用懒加载解决这些问题)。

//2.同理,懒加载可以使用在自定义组件上

//2.1先引入dynamic

代码语言:javascript
复制
import dynamic from 'next/dynamic'
const Self = dynamic(import('../pages/Self'))

// 不使用懒加载
function Time(){
    const [nowTime,setTime] = useState(Date.now())
    //声明一个修改时间的方法
    const timeFilter = () =>{
        // moment组件固定写法 没啥纠结的
        setTime(moment( Date.now() ).format() )
    }
    return(
        <>
            <div>
                {nowTime}
            </div>
            <p><button onClick={timeFilter}>点击格式化时间</button></p>
            {/* 2.2 只有在jsx里用到<Self/>时,才会被加载进来,如果不使用就不会被加载。 */}
            <Self></Self>
        </>
    )
}
// 使用懒加载
function Time2(){
    const [nowTime,setTime] = useState(Date.now())
    const timeFilter = async()=>{ //把方法变成异步模式
        const moment = await import('moment') //等待moment加载完成
        setTime(moment.default( Date.now() ).format() ) //注意使用defalut
    }
    return(
        <>
            <div>
                {nowTime}
            </div>
            <p><button onClick={timeFilter}>点击格式化时间</button></p>
        </>
    )
}

export default Time

7.自定义Head组件优化SEO

//可以使用Head来设置title,meta等来优化seo(next主要就是用来做seo的)

//1.引入Head

//也可以把head封装成一个公共的组件 通过传递参数来在各个页面进行引入和使用

代码语言:javascript
复制
import Head from 'next/head'
function Biaoge(){
    return(
        <div>
            {/* 1.1引入使用设置title和meta */}
            <Head>
                <title>彪哥是最帅的!</title>
                <meta charSet='utf-8' />
            </Head>
           <div>next.js彪哥来了~</div>
        </div>
    )
}
export default Biaoge

8.引用ant-designUi到next.js中

//默认情况下next是不支持import 引入css的,但是要使用antDesignUi就需要使用important

//1.安装 @zeit/next-css 并配置 让next支持important引入css

//2.建立一个next.config.js文件引入并配置(next的总体配置文件)

代码语言:javascript
复制
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}
module.exports = withCss({})
//3.下载依赖包 npm i antd --save
//4.下载babel-plugin-import 插件(按需引入必要的)npm i babel-plugin-import --save
//5.安装完成后,在项目根目录建立.babelrc文件,然后写入如下配置文件。
{
    "presets":["next/babel"],  //Next.js的总配置文件,相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
        [
            "import",
            {
                "libraryName":"antd",
                "style":"css"
            }
        ]
    ]
}
//6.进行按需引入
import {Button} from 'antd'
function TestUi(){
    return(
        <div>
            <Button>antdUiButton</Button>
        </div>
    )
}

export default TestUi

9.next打包并修复ant-design引入导致打包失败的原因。

打包命令:

代码语言:javascript
复制
$npm run build

// 当你使用了Ant Desgin后,在打包的时候会遇到一些坑。

// 在page目录下,新建一个_app.js文件,然后写入下面的代码。

代码语言:javascript
复制
import App from 'next/app'
import 'antd/dist/antd.css'
export default App

// 这个文件相当于是一个全局的配置文件

// 然后把.babelrc找那个的 "style":"css" 去掉即可打包成功

查看打包后的效果:

代码语言:javascript
复制
$npm run start

参考文档:https://www.nextjs.cn/learn/basics/create-nextjs-app/editing-the-page

部署参考:https://segmentfault.com/a/1190000012774650

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2.在next中创建组件:(在page目录下)
  • 3.创建路由
  • 4.路由跳转传参和接收参数以及jsx方式使用css样式
    • 接收参数:
    • 5.路由的6个钩子函数:
    • 6、模块懒加载
    • 7.自定义Head组件优化SEO
    • 8.引用ant-designUi到next.js中
    • 9.next打包并修复ant-design引入导致打包失败的原因。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档