Next.js学习

简介: Next.js学习

1.自动创建项目:

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

npm install -g create-next-app
复制代码
npx 是Node自带的npm模块 低版本的node没有所以需要安装

$npm install -g npx
复制代码
到指定盘符下创建项目:

$npx create-next-app next-create
复制代码
启动项目:

$npm run dev
复制代码
2.在next中创建组件:(在page目录下)
function Biaoge(){
return ()
}
export default Biaoge;
复制代码
3.创建路由
在page目录下创建js,page相当于是一个根目录。

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

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

// 引入Router 使用Router.push

import Router from 'next/router'
复制代码
// 引入页面跳转的组件 link

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

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>
)
}

复制代码
接收参数:
//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个钩子函数:

// 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、模块懒加载
import React, {useState} from 'react'
复制代码
//时间格式化组件 需要下载

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

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

//2.1先引入dynamic

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封装成一个公共的组件 通过传递参数来在各个页面进行引入和使用

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的总体配置文件)

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引入导致打包失败的原因。
打包命令:

$npm run build
复制代码
// 当你使用了Ant Desgin后,在打包的时候会遇到一些坑。

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

import App from 'next/app'
import 'antd/dist/antd.css'
export default App
复制代码
// 这个文件相当于是一个全局的配置文件

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

查看打包后的效果:

$npm run start
复制代码
参考文档:https://www.nextjs.cn/learn/basics/create-nextjs-app/editing-the-page

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

作者: Bill 本文地址: http://biaoblog.cn/info?id=1575856500000

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
16天前
|
JavaScript 前端开发 关系型数据库
如何学习 Node.js?
【8月更文挑战第4天】如何学习 Node.js?
26 3
|
5天前
|
JavaScript 前端开发
Javascript学习
Javascript学习
|
7天前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
26 4
|
8天前
|
存储 JavaScript 前端开发
js对象学习
js对象学习
15 1
|
8天前
|
JavaScript 前端开发
Javascript学习
Javascript学习
18 1
|
7天前
|
移动开发 前端开发 JavaScript
学习Particles.js 给网页来点粒子特效
学习Particles.js 给网页来点粒子特效
22 0
|
8天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
15 0
|
8天前
|
JavaScript 开发者
js之内置对象学习
js之内置对象学习
14 0
|
1月前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
35 4
|
1月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生网课学习效果评价附带文章源码部署视频讲解等
51 2

热门文章

最新文章