2024年最新了解与学习 Next，2024年最新面试的教程

最新推荐文章于 2024-10-08 15:46:28 发布

2401_84419009

最新推荐文章于 2024-10-08 15:46:28 发布

阅读量408

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.youkuaiyun.com/2401_84419009/article/details/138898917

版权

程序员专栏收录该内容

185 篇文章

订阅专栏

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// pages/list.js

export default function List () {

return

List page works

}

文件位置: pages/index.js
访问地址：localhost:3000/
文件位置: pages/list.js
访问地址：localhost:3000/list
文件位置: pages/post/first.js
访问地址：localhost:3000/post/first

页面跳转

Link 组件默认使用 JS 进行页面跳转。即 SPA 形式的跳转
如果浏览器中 JS 被禁用，则使用链接跳转
Link 组件中不应添加除 href 属性以外的属性，其余属性添加到 a 标签上
Link 组件通过预取（在生产中）功能自动优化应用程序已获得最佳性能

import Link from ‘next/link’

list page

静态资源、元数据、CSS

======================================================================

访问静态资源

应用程序根目录中的 public 文件夹用于提供静态资源

通过以下形式进行访问
public/images/i.jpg —> /images/1.jpg
public/css/base.css —> /css/base.css

修改页面元数据

通过 Head 组件修改元数据

// pages/index.js

import Head from ‘next/head’

export default function Home() {

return (<>

index page

index page works

</>)

}

// pages/index.js

import Head from ‘next/head’

export default function List () {

return (<>

list page

List page works

</>)

}

CSS 样式

内置 styled-jsx

在 Next.js 中内置了 styled-jsx，它是一个 CSS-in-JS 库，允许在 React 组件中编写 CSS，CSS 仅作用于组件内部

// pages/index.js

export default function Home() {

return (<>

index page works

</>)

}

CSS 模块

通过使用 CSS 模块功能，允许将组建的 CSS 样式编写在单独的 CSS 文件中。
CSS 模块约定样式文件的名称必须为 “组件文件名称.module.css”

// pages/list.js

import styles from ‘./list.module.css’

export default function List () {

return (

List page works

)

}

全局样式文件

在 pages 文件夹中新建 _app.js 文件，并加入如下代码
在项目根目录下创建 styles 文件夹，并在其中创建 global.css
在 _app.js 中通过 import 引入 global.css
重新启动开发服务器

// pages/_app.js

import ‘…/styles/globals.css’

function MyApp({ Component, pageProps }) {

return <Component {…pageProps} />

}

export default MyApp

// styles/global.css

body {

background-color: pink;

}

预渲染

=============================================================

预渲染是指数据和 HTML 的拼接在服务器端提前完成
预渲染可以使 SEO 更加友好
预渲染会带来更好的用户体验，可以无需运行 JS 即可查看应用程序 UI

预渲染的两种形式

在 Next.js 中支持两种形式的预渲染：静态生成和服务端渲染

静态生成和服务端渲染是生成 HTML 的时机不同
静态生成：静态生成是在构建时生成 HTML，以后的每个请求都公用构建时生成好的 HTML
服务端渲染：服务端渲染是在请求时生成 HTML，每个请求都会重新生成 HTML

两种方式的选择

Next.js 允许开发者为每个页面选择不同的与渲染方式，不同的预渲染方式拥有不同的特点，应根据常见进行渲染，但建议大多数页面使用静态生成
静态生成页面以此构建反腐使用，访问速度快，因为页面都是事先生成好的
适用场景：
营销页面、博客文章、电子商务产品列表、帮助和文档
服务端渲染访问速度不如静态生成块，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面

实现静态生成

无数据和有数据的静态生成
如果组件不需要在其他地方获取数据，直接进行静态生成
如果组件需要在其他地方获取数据，在构建时 Next.js 会预先获取组件需要的数据，然后再对组件进行静态生成

静态生成 getStaticProps

getStaticProps 方法的作用是获取组件静态生成需要的数据，并通过 props 的方式将数据传递给组件
该方法是一个异步函数，需要在组件内部进行导出
在发开模式下，getStaticProps 改为在每个请求上运行

export async function getStaticProps () {

// 从文件系统，API，数据库中获取的数据

const data = …

// props 属性的值将会传递给组件

return {

props: …

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

前端面试题宝典

前端校招面试题详解

props: …

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-pUl1q35Y-1715740758142)]

[外链图片转存中…(img-SPXQAsv3-1715740758142)]

[外链图片转存中…(img-GpfIgl6o-1715740758143)]