分享
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
========================================================================================
create-next-app可以快速的创建Next.js项目，它就是一个脚手架，有了它只要一句命令就可以把项目需要的依赖包和基本目录都生成，工作中我基本不用手动的形式自己创建，全部使用create-next-app来创建。
- 安装create-next-app
使用脚手架前，需要先进行全局安装。
npm install -g create-next-app
安装完成后，就可以通过create-next-app命令来创建一个Next.js的项目了。
- 创建Next.js项目
目前可以支持三种方式的创建，分别是用npx,yarn和create-next-app命令来进行安装，安装的结构都是完全一样的，所以就给大家演示其中的一种npx的形式。
npx 是Node自带的npm模块，所以你只要安装了Node都是可以直接使用npx命令的。
但低版本的Node是不带这个命令的，所以你需要手都安装一下。
$ npm install -g npx
打开命令提示符工具，然后进入D盘，然后直接用下面的npx命令创建项目。
$ npx create-next-app next-create
输入后按回车，就会自动给我们进行安装项目需要的依赖。并且会给我们添加好命令。 稍等一会，全部安装完成后，可以进入项目母乳，执行yarn dev来测试项目。
在浏览器中输入http://localhost:3000/,看到下面的内容，说明项目生成成功.
- 项目结构介绍
-
components文件夹:这里是专门放置自己写的组件的，这里的组件不包括页面，指公用的或者有专门用途的组件。
-
node_modules文件夹：Next项目的所有依赖包都在这里，一般我们不会修改和编辑这里的内容。
-
pages文件夹：这里是放置页面的，这里边的内容会自动生成路由，并在服务器端渲染，渲染好后进行数据同步。
-
public文件夹： 这个是静态文件夹，比如项目需要的图片、图标和静态资源都可以放到这里。
-
.gitignore文件： 这个主要是控制git提交和上传文件的，简称就是忽略提交。
-
styles文件夹：存放样式文件
-
package.json文件：定义了项目所需要的文件和项目的配置信息（名称、版本和许可证），最主要的是使用
npm install就可以下载项目所需要的所有包。
当你了解项目目录和文件后就可以试着修改一下项目，简单的尝试一下了。这节课就到这里了，主要讲解的就是利用create-next-app来创建项目和生成项目的基本结构介绍。
====================================================================================
- 新建页面和访问路径
直接在根目录下的pages文件夹下，新建一个kai.js页面。然后写入下面的代码：
function kai(){
return (kai)
}
export default kai;
只要写完上面的代码，Next框架就自动作好了路由，这个也算是Next的一个重要优点，给我们节省了大量的时间。
现在要作一个更深的页面，比如把有关博客的界面都放在这样的路径下http://localhost:3000/blog/nextBlog,其实只要在pages文件夹下再建立一个新的文件夹blog，然后进入blog文件夹，新建一个nextBlog.js文件，就可以实现了。
nextBlog.js文件内容,我们这里就用最简单的写法了
export default ()=>
写完后，就可以直接在浏览器中访问了，是不是发现Next框架真的减轻了我们大量的工作。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puLO2BAo-1628340314382)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210807084832562.png)]
- Component组件的制作
制作组件也同样方便，比如要建立一个kai组件，直接在components目录下建立一个文件kai.js,然后写入下面代码:
export default ({children})=>{children}
组件写完后需要先引入，比如我们在Index页面里进行引入：
import kai from ‘…/components/kai’
使用就非常简单了，直接写入标签就可以。
按钮
=====================================================================
页面跳转一般有两种形式，第一种是利用标签<Link>,第二种是用js编程的方式进行跳转，也就是利用Router组件。
- 标签式导航
在编写代码之前，先删除index.js中的代码，保证代码的最小化。使用标签式导航需要先进行引入，代码如下:
import Link from ‘next/link’
然后新建两个页面kaiA.js和kaiB.js，新建后写个最简单的页面，能标识出来A、B两个页面就好。
// kaiA
import React from ‘react’
import Link from ‘next/link’
export default () => (
<>
返回首页
</>
)
写完A页面后，可以直接复制A页面的内容，然后修改一下就是B页面。
// kaiB
import React from ‘react’
import Link from ‘next/link’
export default () => (
<>
返回首页
</>
)
有了两个页面后，可以编写首页的代码，实现跳转了。
import React from ‘react’
import Link from ‘next/link’
const Home = () => (
<>
去kaiA界面
去kaiB界面
</>
)
export default Home
用<Link>标签进行跳转是非常容易的，但是又一个小坑需要你注意一下，就是他不支持兄弟标签并列的情况。
去kaiA页面
前端博客
如果这样写会直接报错，报错信息如下
client pings, but there’s no entry for page: /_error
Warning: You’re using a string directly inside . This usage has been deprecated. Please add an tag as child of
但是你可以把这两个标签外边套一个父标签，就可以了，比如下面的代码就没有错误。
去kaiA页面
前端博客
通过标签跳转非常的简单，跟使用<a>标签几乎一样。那再来看看如何用编程的方式进行跳转。
- Router模块进行跳转
在Next框架中还可以使用Router模块进行编程式的跳转，使用前引入Router，代码如下：
import Router from ‘next/router’
然后在Index.js页面中加入，直接使用Router进行跳转就可以了。
<button onClick={()=>{Router.push(‘/kaiA’)}}>去kaiA页面
这样写只是简单，但是还是耦合性太高，跟Link标签没什么区别，你可以修改一下代码，把跳转放到一个方法里，然后调用方法。
import React from ‘react’
import Link from ‘next/link’
import Router from ‘next/router’
const Home = () => {
function gotoA(){
Router.push(‘/kaiA’)
}
return(
<>
去kaiA页面
前端博客
去kaiA页面
</>
)
}
export default Home
这样也是可以实现跳转的，而且耦合性也降低了,所以个人更喜欢这种跳转方式。
===============================================================================
项目开发中一般都不是简单的静态跳转，而是需要动态跳转的。动态跳转就是跳转时需要带一个参数或几个参数过去，然后在到达的页面接受这个传递的参数，并根据参数不同显示不同的内容。比如新闻列表，然后点击一个要看的新闻就会跳转到具体内容。这些类似这样的需求都都是通过传递参数实现的。
- 只能用query传递参数
这节课作一个“找小姐姐”的例子，通过这个例子来通俗易懂的讲解一下路由带参数的知识。在Next.js中只能通过通过query（?id=1）来传递参数，而不能通过(path:id)的形式传递参数，这个一定要记住，在工作中很容易就容易记混。
现在我们改写一下pages文件夹下的index.js文件。
import React from ‘react’
import Link from ‘next/link’
import Router from ‘next/router’
const Home = () => {
return(
<>
xiaobai
</>
)
}
export default Home
这样编写query参数就可以进行传递过去了，接下来就是要接受参数了。
- 接收传递过来的参数
现在还没有小姐姐对应的页面，所以我们要创建xiaojiejie.js页面，并写下下面的代码。
import { withRouter} from ‘next/router’
import Link from ‘next/link’
const Xiaojiejie = ({router})=>{
return (
<>
</>
)
}
export default withRouter(Xiaojiejie)
withRouter是Next.js框架的高级组件，用来处理路由用的，这里先学简单用法，以后还会学习的。通过这种方式就获得了参数，并显示在页面上了。
- 编程式跳转传递参数
回了<Link>这种标签式跳转传递参数的形式，那编程式跳转如何传递那，其实也可以简单使用?加参数的形式，代码如下：
选xiaohong
// gotoXiaojiejie
function gotoXiaojiejie(){
Router.push(‘/xiaojiejie?name=xiaohong’)
}
这种形式跳转和传递参数是完全没有问题的，但是不太优雅，所以也可以写成Object的形式。
function gotoXiaojiejie(){
Router.push({
pathname:‘/xiaojiejie’,
query:{
name:‘xiaohong’
}
})
}
嗯，这样写确实优雅很多(我们一定要面向对象编程，有对象比没对象要好)。
其实<Link>标签也可以写成这种形式，比如我们把第一个修改成这种形式.
在浏览器中预览一下，如果一切正常是可以顺利进行跳转，并接收到传递的值。这节课主要讲解了Next框架的路由跳转时带参数过去，然后用withRouter进行接收。
=======================================================================
routerChangeStart路由发生变化时
在监听路由发生变化时，我们需要用Router组件，然后用on方法来进行监听,在pages文件夹下的index.js，然后写入下面的监听事件，这里我们只打印一句话，就不作其他的事情了。代码如下：
Router.events.on(‘routeChangeStart’,(…args)=>{
console.log(‘1.routeChangeStart->路由开始变化,参数为:’,…args)
})
这个时路由发生变化时，时间第一时间被监听到，并执行了里边的方法。
routerChangeComplete
路由变化开始时可以监听到，那结束时也时可以监听到的，这时候监听的事件是routerChangeComplete。
Router.events.on(‘routeChangeComplete’,(…args)=>{
console.log(‘routeChangeComplete->路由结束变化,参数为:’,…args)
})
beforeHistoryChange浏览器history触发前
history就是HTML中的API，如果这个不了解可以百度了解一下，Next.js路由变化默认都是通过history进行的，所以每次都会调用。 不适用history的话，也可以通过hash
Router.events.on(‘beforeHistoryChange’,(…args)=>{
console.log(‘3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:’,…args)
})
routeChangeError路由跳转发生错误时
Router.events.on(‘routeChangeError’,(…args)=>{
console.log(‘4,routeChangeError->跳转发生错误,参数为:’,…args)
})
需要注意的是404找不到路由页面不算错误，这个我们就不演示了。
- 转变成hash路由模式
还有两种事件，都是针对hash的，所以现在要转变成hash模式。hash模式下的两个事件hashChangeStart和hashChangeComplete,就都在这里进行编写了。
Router.events.on(‘hashChangeStart’,(…args)=>{
console.log(‘5,hashChangeStart->hash跳转开始时执行,参数为:’,…args)
})
Router.events.on(‘hashChangeComplete’,(…args)=>{
console.log(‘6,hashChangeComplete->hash跳转完成时,参数为:’,…args)
})
在下面的jsx语法部分，再增加一个链接,使用hash来进行跳转，代码如下：
为了方便你学习，我这里给出index.js的全部代码，你可以在练习时进行参考。
import React from ‘react’
import Link from ‘next/link’
import Router from ‘next/router’
const Home = () => {
function gotoXiaojiejie(){
Router.push({
pathname:‘/xiaojiejie’,
query:{
name:‘井空’
}
})
}
Router.events.on(‘routeChangeStart’,(…args)=>{
console.log(‘1.routeChangeStart->路由开始变化,参数为:’,…args)
})
Router.events.on(‘routeChangeComplete’,(…args)=>{
console.log(‘2.routeChangeComplete->路由结束变化,参数为:’,…args)
})
Router.events.on(‘beforeHistoryChange’,(…args)=>{
console.log(‘3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:’,…args)
})
Router.events.on(‘routeChangeError’,(…args)=>{
console.log(‘4,routeChangeError->跳转发生错误,参数为:’,…args)
})
Router.events.on(‘hashChangeStart’,(…args)=>{
console.log(‘5,hashChangeStart->hash跳转开始时执行,参数为:’,…args)
})
Router.events.on(‘hashChangeComplete’,(…args)=>{
console.log(‘6,hashChangeComplete->hash跳转完成时,参数为:’,…args)
})
return(
<>
选井空
选井空
</>
)
}
export default Home
这节主要学习了路由的钩子事件，利用钩子事件是可以作很多事情的，比如转换时的加载动画，关掉页面的一些资源计数器…。
========================================================================================
在Next.js框架中提供了getInitialProps静态方法用来获取远端数据，这个是框架的约定，所以你也只能在这个方法里获取远端数据。不要再试图在声明周期里获得，虽然也可以在ComponentDidMount中获得，但是用了别人的框架，就要遵守别人的约定。
- 安装和引入Axios插件
Axios是目前最或的前端获取数据的插件了，也是由大神首推的数据接口请求插件，我在工作中也是一直在使用它，所以这里依然使用Axios来进行远端数据请求。在请求前需要先安装Axios插件。
打开终端，直接使用yarn命令进行安装。
yarn add axios
我使用的版本是0.19.0,可能你学习的时候会稍有变化。安装完成后，在需要的页面中用import引入axios，代码如下：
import axios from ‘axios’
引入后，就可以使用getInitialProps进行获取后端接口数据了。
getInitialProps中获取数据
在xiaojiejie.js页面中使用getInitialProps，因为是远程获取数据，所以我们采用异步请求的方式。数据存在了Easy Mock中，地址如下：
https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList
(你可以自己作一个数据源，因为这个可能也不稳定，不过半年内应该是可以的)
Xiaojiejie.getInitialProps = async ()=>{
const promise =new Promise((resolve)=>{
axios(‘https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList’).then(
(res)=>{
console.log(‘远程数据结果：’,res)
resolve(res.data.data)
}
)
})
return await promise
}
获得数据后，我们需要把得到的数据传递给页面组件，用{}显示出来就可以了。
const Xiaojiejie = ({router,list})=>{
return (
<>
{list}
</>
)
}
这样我们就利用Axios从远端获取了数据，为了方便你学习，这里给出xiaojiejie.js的所有代码。
import { withRouter} from ‘next/router’
import Link from ‘next/link’
import axios from ‘axios’
const Xiaojiejie = ({router,list})=>{
return (
<>
{list}
</>
)
}
Xiaojiejie.getInitialProps = async ()=>{
const promise =new Promise((resolve)=>{
axios(‘https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList’).then(
(res)=>{
console.log(‘远程数据结果：’,res)
resolve(res.data.data)
}
)
})
return await promise
}
export default withRouter(Xiaojiejie)
================================================================================
在Next.js中引入一个CSS样式是不可以用的，如果想用，需要作额外的配置。因为框架为我们提供了一个style jsx特性，也就是把CSS用JSX的语法写出来。如果你以前学过Vue，那这种写法你是非常熟悉的。
- 初识
Style JSX语法 把字体设成蓝色
在pages文件夹下，新建一个kai.js文件。然后写入下面的代码：
//kai.js
function kai(){
return (
<>
</>
)
}
export default kai
这个是一个最简单的页面，只在层中写了一句话。这时候我们想把页面中字的颜色变成蓝色，就可以使用Style JSX语法。直接在<></>之间写下如下的代码:
主要所有的css样式需要用{}进行包裹，否则就会报错。这时候你打开浏览器进行预览，字体的颜色就变成了蓝色。
- 自动加随机类名 不会污染全局CSS
加入了Style jsx代码后，Next.js会自动加入一个随机类名，这样就防止了CSS的全局污染。比如我们把代码写成下面这样，然后在浏览器的控制台中进行查看，你会发现自动给我们加入了类名，类似jsx-xxxxxxxx。
function kaikai(){
return (
<>
</>
)
}
export default kai
- 动态显示样式
Next.js使用了Style jsx,所以定义动态的CSS样式就非常简单，比如现在要作一个按钮，点击一下，字体颜色就由蓝色变成了红色。下面是实现代码。
import React, {useState} from ‘react’
function kai(){
//关键代码----------start-------
const [color,setColor] = useState(‘blue’)
const changeColor=()=>{
setColor(color==‘blue’?‘red’:‘blue’)
}
//关键代码----------end-------
return (
<>
最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
