Next.js

本文应用了 MongoDB, 还没有集成的能够看一下上篇文章 Next14 app +Vercel 集成 MongoDBnext13 能够参考 trpc 文档 而且谷歌上曾经有不少问题解答，然而目前 next14 app 只看到一个我的项目中有用到 Github 仓库，目前这个仓库中服务端的上下文获取存在问题，目前找到一个有用的能够看 Issus。目前 trpc 对 next14 app 的反对进度能够看 Issus好的进入 注释 装置依赖包（这里我的依赖包版本是 10.43.1） yarn add @trpc/serve @trpc/client @trpc/react-query zod创立中间件 context.ts（我的trpc 相干文件的门路是 src/lib/trpc/）。这里我有用到 JWT 将用户信息挂载在上下文中 import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';import Jwt from 'jsonwebtoken';type Opts = Partial<FetchCreateContextFnOptions>;/** * 创立上下文 服务端组件中没有req resHeaders * @see https://trpc.io/docs/server/adapters/fetch#create-the-context */export function createContext(opts?: Opts): Opts & { userInfo?: Jwt.JwtPayload;} { const userInfo = {}; return { ...(opts || {}), userInfo };}export type Context = Awaited<ReturnType<typeof createContext>>;创立 trpc.ts 文件寄存实例 ...

首先须要浏览集成文档 https://www.mongodb.com/developer/products/atlas/how-to-conne... 该文档是将从零集成（从创立账号到创立储存库）当你达到这一步的时候，你的 Vercel 中会有一个环境变量名称为 MONGODB_URI 这时候你也能够依照集成文档中 同步Vercel环境变量 进行同步，也能够间接将 MONGODB_URI变量复制到本地环境 当你做完这些后能够浏览 文档 ，该文档会教你 注意事项、以及与 Vercel 集成办法（这个咱们曾经依照下面的步骤以及集成了则能够跳过）、以及在 Atlas UI 中 治理 Vercel 连贯这里是我的 Atlas UI 面板，能够看到左上角我有一个 next 的组织，而后有一个项目名称也叫 next 有一个库叫做 Cluster0，并且我的 next 我的项目是与 Vercel 相绑定，Vercel Projects 中我绑定了两个我的项目一个 yintan 一个 blasfin。 你在你绑定的我的项目中 Database Access 菜单中能够看到有一个 vercel-admin-user-xxxxx，这是你集成 vercel 主动创立 前置步骤做完后进入代码中 正题下载 mongodb 依赖包（如果没有的话）新建 db.ts 文件，你能够在 src/server 或者 src/lib 创立。上面这段代码能够在 vercel 示例我的项目 中找到。请保障你的环境变量中有 MONGODB_URI import { MongoClient } from 'mongodb';const uri = process.env.MONGODB_URI as string; // your mongodb connection stringconst options = {};declare global { var _mongoClientPromise: Promise<MongoClient>;}class Singleton { private static _instance: Singleton; private client: MongoClient; private clientPromise: Promise<MongoClient>; private constructor() { this.client = new MongoClient(uri, options); this.clientPromise = this.client.connect(); if (process.env.NODE_ENV === 'development') { // In development mode, use a global variable so that the value // is preserved across module reloads caused by HMR (Hot Module Replacement). global._mongoClientPromise = this.clientPromise; } } public static get instance() { if (!this._instance) { this._instance = new Singleton(); } return this._instance.clientPromise; }}const clientPromise = Singleton.instance;// Export a module-scoped MongoClient promise. By doing this in a// separate module, the client can be shared across functions.export default clientPromise;在 src/app/api/db/[collection] 文件夹中新建 route.ts 文件 ...

自定义服务器启动相干依赖dotenv 读取 env 文件数据express node 框架<details> <summary>根底示例如下</summary> // src/server/index.tsimport 'dotenv/config';import express from 'express';import chalk from 'chalk';const port = Number(process.env.PORT) || 3000;const app = express();const nextApp = next({ dev: process.env.NODE_ENV !== 'production', port: PORT,});const nextHandler = nextApp.getRequestHandler();const start = async () => { // 筹备生成 .next 文件 nextApp.prepare().then(() => { app.all('*', (req, res) => { return nextHandler(req, res); }); app.listen(port, () => { console.log( '\x1b[36m%s\x1b[0m', `> Ready on http://localhost:${port}` ); }); });};start();</details> ...

良久前写了对于 getStaticProps 和 getStaticPaths 的内容，然而半年过来了源码解析就始终遗记了，不久前有人揭示才想起来，补下坑。本文次要是解读下 getStaticProps、getStaticPaths 相干的源码，不理解这两个 API 的倡议先看下之前的文章再看。 getStaticProps首先 getStaticProps 是利用于 SSG 场景，咱们先看下 packages/next/server/render.tsx 中相干的代码： const isSSG = !!getStaticProps;const pageIsDynamic = isDynamicRoute(pathname);if (isSSG && !isFallback) { let data: UnwrapPromise<ReturnType<GetStaticProps>>; try { data = await getStaticProps!({ ...(pageIsDynamic ? { params: query as ParsedUrlQuery } : undefined), ...(isPreview ? { preview: true, previewData: previewData } : undefined), locales: renderOpts.locales, locale: renderOpts.locale, defaultLocale: renderOpts.defaultLocale }); } catch (staticPropsError: any) { // .... } // ...}isFallback 能够先不论。能够看到 getStaticProps 同样能够为异步函数，而是否为 SSG 就是由是否存在 getStaticProps 函数来决定的，SSG 场景下的 pageIsDynamic 则必须配合 getStaticPaths 应用，能够看到 getStaticProps 会接管几个参数： ...

前言之前写过对于next.js鉴权操作cookie的文章，Next.js-cookie鉴权+续期1和Next.js-cookie鉴权+续期2，最近chatgpt十分火，于是我问它next.js鉴权最佳实际，上面是它的答复： 设置正当的 cookie 有效期：正当的 cookie 有效期应该依据网站的特点来确定，通常倡议将其设置为肯定工夫内（如 30 分钟）。援用定时刷新 cookie 的有效期：能够通过服务器端的 HTTP 拦截器来监测每个申请的 cookie 是否行将过期，当发现其行将过期时，立刻从新设置一个新的 cookie，并在响应头中返回给客户端。援用前端优化提醒弹窗：通过前端 JavaScript 实现 cookie 弹窗过期揭示，将其联合到用户体验优化计划之中，提供清晰的提醒，帮忙用户解决 cookie 续期或是否敞开要求。 援用风控，管制 cookie 的数据权限：依据用户的操作行为等危险因素，为 cookie 设置不同的权限级别，限度 cookie 的数据权限。 援用应用 HTTPS 协定：采纳 HTTPS 协定，可保障传输过程中传输平安。 在实践中，续期策略须要依据不同网站的业务场景，以及用户的应用习惯，思考相应的细节状况。于是我又问，cookie轮询操作是不是影响服务器性能，于是它答复我： 在用户沉闷期间，页面会始终更新并续期 cookie。为了查看 cookie 是否过期并续期它，能够在页面中应用 useEffect 监听 window 对象的 focus 事件，当用户回到页面时查看 cookie 是否过期。如果 cookie 快要过期，就续期它。于是我又问，应用 useEffect 监听 window 对象的 focus 事件好还是轮询好，上面是它的答复： 应用 window.addEventListener("focus", handleFocus) 更好，因为它可能响应用户的交互行为，缩小不必要的拜访和资源耗费。如果应用轮询，每隔固定的工夫距离就会向服务器发送申请，这可能会节约用户的工夫和网络带宽，对服务器也会造成额定的压力。而应用 window.addEventListener("focus", handleFocus) 到用户呈现交互行为时才会进行操作，这是更高效和精确的形式。于是，我就又把之前的鉴权颠覆了，应用了chatgpt举荐的形式，分享给大家。 操作前端操作首先在布局页面监听用户的动作，而后调用验证cookie的操作，如果快要过期则返回以set-cookie的形式返回给前端浏览器中保留，否则不做解决，这样比轮询操作既简略又不便，又不会频繁发动申请耗费服务器性能。 layout.js // 监听用户动作，如果页面被点击就申请cookie是否将要过期，如果是则返回新cookie，否则不做anything useEffect(() => { setMounted(true) // 判断是否是客户端 if (process.browser && isLogin){ window.addEventListener("focus", handleFocus); return () => { window.removeEventListener("focus", handleFocus); }; } }, []) // 验证cookie是否将要过期，如果是返回新cookie写入到浏览器 async function handleFocus(){ const res = await dispatch(refreshCookie()) if (res.payload.status === 40001){ confirm({ title: '登录已过期', icon: <ExclamationCircleFilled />, content: '您的登录已过期，请从新登录！', okText: '确定', cancelText: '勾销', onOk() { // 从新登录 location.href = '/login' }, onCancel() { // 刷新以后页面 location.reload() }, }); } }咱们把之前操作中的axiosInstance.interceptors.response.use(function (response)代码全副移除掉，只剩下上面的代码： ...

前言最近在看三国演义，开篇第一段话：话说天下大势，分久必合，合久必分。我把这段话用来解释next.js+redux水合作用再失当不过了。 什么是水合？水合是咱们在next.js我的项目中引入next-redux-wrapper插件之后给出的一个新概念，它是连贯和对立客户端和服务端数据的一个重要纽带。 英文名叫HYDRATE，中文叫水合又叫水化，我在网上搜寻的答复： 水合物指的是含有水的化合物，其范畴相当宽泛。其中水能够以配位键与其余局部相连，如水合金属离子，也能够是以共价键相结合，如水合三氯乙醛。也能够指是天然气中某些组分与水分在肯定温度、压力条件下造成的红色晶体，外观相似致密的冰雪，密度为0.88\~0.90 g/cm^3^。水合物是一种笼形晶体包络物，水分子借氢键联合造成笼形结晶，气体分子被突围在晶格之中。看得我一头雾水，于是联合我本人的了解我来解释下何为水合，如果解释的不对，也心愿大家对我批评指正。 艰深的说就是同一个水源进去多个分支的水流，最初水流又从新汇聚成新的水源，再反复这个过程。有点相似git下面的分支，有一个总分支master，还有子分支dev/test/uat等等，离开开发完又合并到总分支master。 不晓得我这样解释能不能帮忙你们了解，而在代码层面就是：关上一个新页面，或者切换新的路由的时候，Redux数据源Store会分流到所有Pages中的页面，最初在Reducer中合并服务端和客户端数据成新的Store数据源，再反复这样的过程。 具体的过程next-redux-wrapper插件官网给出了解释： Using next-redux-wrapper ("the wrapper"), the following things happen on a request: Phase 1: getInitialProps/getStaticProps/getServerSideProps The wrapper creates a server-side store (using makeStore) with an empty initial state. In doing so it also provides the Request and Response objects as options to makeStore.In App mode: The wrapper calls the _app's getInitialProps function and passes the previously created store.Next.js takes the props returned from the _app's getInitialProps method, along with the store's state.In per-page mode: The wrapper calls the Page's getXXXProps function and passes the previously created store.Next.js takes the props returned from the Page's getXXXProps method, along with the store's state.Phase 2: SSR ...

动静表单初始化必须给{}赋值表单的name与值，否则会报不受控（即便是遍历进去的表单） 动静款式计划一：CSS Module + classnames import classNames from 'classnames' function Render () { return ( <div className={ classNames( ProgressStyles.fragment, { [ProgressStyles.fragmentActive]: idx <= activeIndex } ) } key={idx}>{idx}</div> )}Notes: CSS Modules不反对连字符、下划线连接。 .fragment { background: rgba(0, 0, 0, 0.06); flex: 1; & + & { margin: { left: 10px; }; } &Active { background: #0F68FF; }}计划二：款式浸透:global :global { .ant-select-selector { border: 1px solid #E5E5E5; background: linear-gradient(125.85deg, rgba(59, 63, 238, 0.1) 0%, rgba(57, 159, 254, 0.1) 100%); @media screen and (min-width: 550px) { height: nth($lineHeight, 1)!important; line-height: nth($lineHeight, 1)!important; } @media screen and (max-width: 550px) { height: nth($lineHeight, 2)!important; line-height: nth($lineHeight, 2)!important; } } .ant-select-selection-placeholder { @include placeholder; } } :global(.swiper-slide) { cursor: pointer; }组件定义Slot定义SwiperCommon组件的调用，须要用SwiperCommon外部遍历的列表项数据： ...

案例我从2020年开始始终应用next.js做为我的前端SSR框架，应用@reduxjs/toolkit做为全局状态管理器，应用next-redux-wrapper帮助next.js连贯和合并redux中store数据并且放弃不变，否则会导致数据反复渲染性能问题，然而最近发现一个很奇怪的问题：就是router.push路由跳转的时候导致以后页面反复渲染问题！ 换句话说也就是：我从PageA跳转到PageB，应该是只有PageB页面才会渲染，然而当初岂但PageB渲染了，PageA也渲染了！！！ 剖析与操作通过我应用排除代码的形式剖析发现，原来每次路由导航的时候都会触发useSelector这个办法，而这个办法是react-redux插件的。 为什么会导航的时候会触发useSelector呢？我又在网上搜寻相干话题，终于被我找到一篇文章react-redux应用useSelector获取数据导致组件反复渲染的问题 通过redux中的hooks – useSelector 获取store中的数据时，只有store中的数据产生了扭转，即便组件中并没有获取批改的数据，组件也会进行从新渲染。也就是说造成反复渲染的起因是因为redux中store数据源变动了导致的。 于是咱们应用文中提到的设置useSelector的第2个参数，雷同的时候返回true会阻止反复渲染，不同的时候返回false从新渲染的机制，咱们应用了lodash的isEqual办法来判断。 留神：react-redux自带的shallowEqual办法是浅比拟，所以是数组对象的状况下比拟是有问题的，所以这里咱们应用了lodash的isEqual办法来深度比拟判断。 import _ from 'lodash'const {userInfo, latestNews, likeUrls, reportUrls} = useSelector((state) => state.home, (_old, _new)=>{ console.log('old=',_old,',new=',_new) return _.isEqual(_old, _new) });然而问题是，我只是做了一个路由跳转为什么会导致redux中store数据源前后不统一呢？ 于是我加了个打印日志的代码，如下： 发现的确不一样了，而且次要集中在latestNews, likeUrls, reportUrls这三个数据源上，而userInfo不变。 这是为什么呢？于是我又看了一下next-redux-wrapper文档，发现外面这段代码和一段形容： State reconciliation during hydrationEach time when pages that have getStaticProps or getServerSideProps are opened by user the HYDRATE action will be dispatched. This may happen during initial page load and during regular page navigation. The payload of this action will contain the state at the moment of static generation or server side rendering, so your reducer must merge it with existing client state properly.翻译成中文 ...

前言最近在应用Next.js的时候发现用户认证和刷新token时候跟之前单页面利用SPA的token认证和刷新token计划有所出入，实现起来也更简单，于是本人参考B站、掘金、思否和简书的SSR网站折腾了一段时间终于解决了这个问题，分享给大家做参考，如果你们感觉文中有不妥的中央也心愿不吝指出。 单页面利用TOKEN认证和刷新计划咱们在用SPA做后盾管理系统认证受权的时候，始终采纳的是jwt token计划，这套计划简略而高效，流程如下： 1、用户登录胜利后盾生成jwt token并返回给前端保留到localstorage 2、前端接口通过axios申请头上携带Authorization: token 传递给后盾做认证 3、后盾通过前端传递过去的token验证是否通过 4、如果token过期，能够通过axios的拦截器拦挡401状态码并带上refresh_token从后盾获取新token并保留到localstorage中 上面是axios拦截器的应用，参考 axios.interceptors.response.use( error => { /* *当响应码为 401 时，尝试刷新令牌。 */ if (status == 401) { return axios.post('/api/login/refresh', {}, { headers: { 'Authorization': 'Bearer ' + getRefreshToken() } }).then(async response => { const data = response.data.data setToken(data.token) setRefreshToken(data.refreshToken) error.response.config.headers['Authorization'] = 'Bearer ' + data.token return await axios(error.response.config).then(res => res.data) }).catch(error => { //清理token store.dispatch('user/resetToken') this.router.push('/login') return Promise.reject(error) }) } }) ...

前言最近应用next.js开发过程中发现服务端set-cookie返回设置到浏览器不胜利，于是钻研了一下如何解决，分享给大家。 操作前后台cookie如何互相传递？1、前端如何传递cookie到后盾？ 前端通过axios(或者fetch也能够)调用后盾接口的时候通过request申请头header的cookie属性(前端是你的浏览器中存在Cookie)带到后盾，前提是要同源，如：前端地址是：www.baidu.com，后盾是：www.baiud.com/api或者api.baidu.com，这样的能力拜访浏览器中的cookie。 2、后盾如何传递cookie到前端？ 后盾通过response申请头header的set-cookie属性带到前端浏览器，主动就能写到指定域名下。 理解next.js的执行过程const pageA = (props) => { return <div> this is Page A</div>}export async function getServerSideProps(context) { const res = await axios({ url: "http://www.baidu.com/api/getUserList", data: xxx }); const data = res?.data; return { props: { data } }}export default pageA;下面是一段非常简单的next.js页面的代码，它分为两局部，页面pageA和服务端获取接口数据getServerSideProps，当刷新页面或者首次关上页面时首先执行的是getServerSideProps办法，执行实现 之后才到pageA办法体中，是这样一个执行过程。 这也是SSR渲染最外围的中央，先从后盾返回数据再渲染出页面，缩小SPA解释js的等待时间。 留神：getServerSideProps办法只有在页面第一次渲染的时候才执行(或者刷新页面、跳转页面)，前面就不会再进来了。 next.js客户端如何传递cookie到后盾？首先咱们看一个问题就是下面的http://www.baidu.com/api/getUserList接口是没方法传递cookie到后盾的，为什么不能把cookie传递到后盾呢？怎么能力传递cookie到后盾呢？ 首先答复第一个问题，因为getServerSideProps执行在服务端所以是拿不到浏览器外面的cookie的，这时候须要通过next.js的context属性拿到。 答复第二个问题，只有通过上面的代码手动指定，这也是SSR非凡的中央。 axios.defaults.headers.cookie = context.req.headers.cookie || null当然如果页面曾经渲染完，这时候你通过页面管制接口的拜访的时候就不必这么麻烦，因为浏览器会主动帮你把cookie带到接口的申请头：request header cookie上。 next.js服务端如何传递cookie到客户端浏览器？曾经理解如何将cookie从客户端传递到服务端之后 ，咱们再来解决如何将cookie从服务端传递到客户端浏览器中，下面曾经讲过后盾是通过接口中返回的response申请头中的set-cookie属性传递过去的，如果是SPA那么间接就能够设置到Cookie中，然而咱们是SSR是next.js当然没那么简略了，那么咱们如何设置呢？ 要做两步操作：1、对axios返回申请头做设置2、getServerSideProps办法中再次设置set-cookie const axiosInstance = axios.create({ baseURL: `http://www.baidu.com/api`, withCredentials: true,});axiosInstance.interceptors.response.use(function (response) { axiosInstance.defaults.headers.setCookie = response.headers['set-cookie'] return response;}, function (error) { // 超出 2xx 范畴的状态码都会触发该函数。 // 对响应谬误做点什么 return Promise.reject(error);});export default axiosInstance;下面的axiosInstance.defaults.headers.setCookie = response.headers['set-cookie']代码就是把后盾返回的set-cookie属性赋值给axiosInstance.defaults.headers.setCookie，而后，回到getServerSideProps办法中，再在最初返回给浏览器中，如下所示： ...

Next.js+React+Node零碎实战，搞定SSR服务器渲染内附文档源码下载地址：百度网盘Java 诊断工具 Arthas-实操案例实操案例排查函数调用异样通过curl 请求接口只能看到返回异样，然而看不到具体的请求参数和堆栈信息。shell@Alicloud:~$ curl{"timestamp":1655435063042,"status":500,"error":"Internal Server Error","exception":"java.lang.IllegalArgumentException","message":"id < 1","path":"/user/0"}复制代码查看UserController的 参数/异样在Arthas里执行：watch com.example.demo.arthas.user.UserController * '{params, throwExp}'复制代码 第一个参数是类名，反对通配第二个参数是函数名，反对通配 拜访watch命令会打印调用的参数和异样再次通过curl 调用可能在arthas外面查看到具体的异样信息。把获取到的后果开展，可能用-x参数：watch com.example.demo.arthas.user.UserController * '{params, throwExp}' -x 2复制代码返回值表达式在下面的例子里，第三个参数是返回值表达式，它实际上是一个ognl表达式，它反对一些内置对象： loaderclazzmethodtargetparamsreturnObjthrowExpisBeforeisThrowisReturn 比如返回一个数组：watch com.example.demo.arthas.user.UserController * '{params[0], target, returnObj}'复制代码条件表达式watch命令反对在第4个参数里写条件表达式，比如：当拜访 user/1 时，watch命令没有输入当拜访 user/101 时，watch会打印出后果。 当异样时捕捉watch命令反对-e选项，示意只捕捉抛出异样时的请求：watch com.example.demo.arthas.user.UserController * "{params[0],throwExp}" -e复制代码按照耗时进行过滤watch命令反对按请求耗时进行过滤，比如：watch com.example.demo.arthas.user.UserController * '{params, returnObj}' '#cost>200'复制代码热更新代码这个也是真的秀。 拜访 http://localhost:61000/user/0 ，会返回500异样：shell@Alicloud:~$ curl http://localhost:61000/user/0{"timestamp":1655436218020,"status":500,"error":"Internal Server Error","exception":"java.lang.IllegalArgumentException","message":"id < 1","path":"/user/0"}复制代码通过热更新代码，修改这个逻辑。jad反编译UserControllerjad --source-only com.example.demo.arthas.user.UserController > /tmp/UserController.java复制代码jad反编译的后果保存在 /tmp/UserController.java文件里了。再打开一个Terminal 窗口，而后用vim来编辑/tmp/UserController.java：vim /tmp/UserController.java复制代码比如当 user id 小于1时，也失常返回，不抛出异样：@GetMapping(value={"/user/{id}"})public User findUserById(@PathVariable Integer id) { logger.info("id: {}", (Object)id);if (id != null && id < 1) { return new User(id, "name" + id); // throw new IllegalArgumentException("id < 1");}return new User(id.intValue(), "name" + id);}复制代码sc查找加载UserController的ClassLoader[arthas@1266]$ sc -d *UserController | grep classLoaderHash classLoaderHash 19469ea2复制代码classLoaderHash 是19469ea2，前面需要使用它。mc保存好/tmp/UserController.java之后，使用mc(Memory Compiler)命令来编译，并且通过-c或者--classLoaderClass参数指定ClassLoader： ...

Next.js+React+Node零碎实战，搞定SSR服务器渲染百度网盘链接Java 基础常见学识点&面试题总结面向对象基础面向对象和面向过程的区别两者的次要区别在于解决问题的形式不同： 面向过程把解决问题的过程拆成一个个方法，通过一个个方法的执行解决问题。面向对象会先抽象出对象，而后用对象执行方法的形式解决问题。 另外，面向对象开发的程序一般更易保护、易复用、易扩大。相干 issue : 面向过程 ：面向过程性能比面向对象高？？成员变量与局部变量的区别 语法形式 ：从语法形式上看，成员变量是属于类的，而局部变量是在代码块或方法中定义的变量或是方法的参数；成员变量可能被 public,private,static 等修饰符所润饰，而局部变量不能被访问控制修饰符及 static 所润饰；然而，成员变量和局部变量都能被 final 所润饰。存储形式 ：从变量在内存中的存储形式来看,如果成员变量是使用 static 润饰的，那么这个成员变量是属于类的，如果没有使用 static 润饰，这个成员变量是属于实例的。而对象存在于堆内存，局部变量则存在于栈内存。生存工夫 ：从变量在内存中的生存工夫上看，成员变量是对象的一部分，它随着对象的创建而存在，而局部变量随着方法的调用而主动生成，随着方法的调用结束而沦亡。默认值 ：从变量是否有默认值来看，成员变量如果没有被赋初始值，则会主动以类型的默认值而赋值（一种情况例外:被 final 润饰的成员变量也必须显式地赋值），而局部变量则不会主动赋值。 创建一个对象用什么运算符?对象实体与对象引用有何不同?new 运算符，new 创建对象实例（对象实例在堆内存中），对象引用指向对象实例（对象引用存放在栈内存中）。一个对象引用可能指向 0 个或 1 个对象（一根绳子可能不系气球，也可能系一个气球）;一个对象可能有 n 个引用指向它（可能用 n 条绳子系住一个气球）。对象的相等和引用相等的区别 对象的相等一般比较的是内存中存放的内容是否相等。引用相等一般比较的是他们指向的内存地址是否相等。 类的构造方法的作用是什么?构造方法是一种非凡的方法，次要作用是实现对象的初始化工作。如果一个类没有申明构造方法，该程序能正确执行吗?如果一个类没有申明构造方法，也可能执行！因为一个类即使没有申明构造方法也会有默认的不带参数的构造方法。如果咱们自己增加了类的构造方法（无论是否有参），Java 就不会再增加默认的无参数的构造方法了，咱们一直在人不知;鬼不觉地使用构造方法，这也是为什么咱们在创建对象的时候前面要加一个括号（因为要调用无参的构造方法）。如果咱们重载了有参的构造方法，记得都要把无参的构造方法也写进去（无论是否用到），因为这可能帮助咱们在创建对象的时候少踩坑。构造方法有哪些个性？是否可被 override?构造方法个性如下： 名字与类名雷同。没有返回值，但不能用 void 申明结构函数。生成类的对象时主动执行，无需调用。 构造方法不能被 override（重写）,然而可能 overload（重载）,所以你可能看到一个类中有多个结构函数的情况。面向对象三大特色封装封装是指把一个对象的状态信息（也就是属性）躲藏在对象外部，不容许内部对象间接拜访对象的外部信息。然而可能提供一些可能被外界拜访的方法来操作属性。就好像咱们看不到挂在墙上的空调的外部的整机信息（也就是属性），然而可能通过遥控器（方法）来管制空调。如果属性不想被外界拜访，咱们大可不必提供方法给外界拜访。然而如果一个类没有提供应外界拜访的方法，那么这个类也没有什么意义了。就好像如果没有空调遥控器，那么咱们就无奈操控空凋制冷，空调本身就没有意义了（当然现在还有很多其余方法 ，这里只是为了举例子）。public class Student { private int id;//id属性私有化private String name;//name属性私有化//获取id的方法public int getId() { return id;}//设置id的方法public void setId(int id) { this.id = id;}//获取name的方法public String getName() { return name;}//设置name的方法public void setName(String name) { this.name = name;}}复制代码继承不同类型的对象，相互之间常常有肯定数量的共同点。例如，小明同学、小红同学、小李同学，都共享学生的个性（班级、学号等）。同时，每一个对象还定义了额定的个性使得他们不同凡响。例如小明的数学比较好，小红的性情惹人喜爱；小李的力量比较大。继承是使用已存在的类的定义作为基础建立新类的技术，新类的定义可能减少新的数据或新的功能，也可能用父类的功能，但不能选择性地继承父类。通过使用继承，可能疾速地创建新的类，可能提高代码的重用，程序的可维护性，俭约大量创建新类的工夫 ，提高咱们的开发效率。对于继承如下 3 点请记住： ...

Next.js+React+Node零碎实战，搞定SSR服务器渲染超清原画 残缺无密 获取ZY:网盘链接hashCode() 和 equals()的区别equals()equals() 方法用于比较两个对象是否相等，它与 == 相等比较符有着本质的不同。 在万物皆对象的 Java 体系中，零碎把判断对象是否相等的权力交给程序员。具体的措施是把 equals() 方法写到 Object 类中，并让所有类继承 Object 类。 这样程序员就能在自定义的类中重写 equals() 方法, 从而实现自己的比较逻辑。 hashCode()hashCode() 的意义是哈希值, 哈希值是经哈希函数运算后失去的后果，哈希函数能够保障雷同的输出能够失去雷同的输入(哈希值)，然而不能够保障不同的输出总是能得出不同的输入。 当输出的样本量足够大时，是会产生哈希冲突的，也就是说不同的输出产生了雷同的输入。 暂且不谈冲突，就雷同的输出能够产生雷同的输入这点而言，是及其宝贵的。它使得零碎只需要通过简略的运算，在工夫复杂度O(1)的情况下就能得出数据的映射关系，根据这种个性，散列表应运而生。 一种支流的散列表实现是：用数组作为哈希函数的输入域，输出值通过哈希函数计算后失去哈希值。而后根据哈希值，在数组种找到对应的存储单元。当发生冲突时，对应的存储单元以链表的形式保存冲突的数据。 两者关系在大多数编程实践中，归根结底会落实到数据的存取问题上。 在汇编语言期间，你需要老诚恳实地对每个数据操作编写存取语句。 而随着期间发展到明天，咱们都用更便利灵活的高级语言编写代码，比如 Java。 Java 以面向对象为中心思想，封装了一系列操作数据的 api，升高了数据操作的复杂度。 但在咱们对数据进行操作之前，首先要把数据按照肯定的数据结构保存到存储单元中，否则操作数据将无从谈起。 然而不同的数据结构有各自的个性，咱们在存储数据的时候需要抉择合适的数据结构进行存储。 Java 根据不同的数据结构提供了丰富的容器类，便利程序员抉择适合业务的容器类进行开发。 通过继承关系图咱们看到 Java 的容器类被分为 Collection 和 Map 两大类，Collection 又可能进一步分为 List 和 Set。 其中 Map 和 Set 都是不容许元素重复的，严格来说Map存储的是键值对，它不容许重复的键值。 值得注意的是：Map 和 Set 的绝大多数实现类的底层都会用到散列表结构。 讲到这里咱们提取两个关键字不容许重复和散列表结构， 回顾 hashCode() 和 equals() 的个性，你是否想到了些什么货色呢？equals()力不从心下面提到 Set 和 Map 不存放重复的元素（key），这些容器在存储元素的时必须对元素做出判断：在以后的容器中有没有和新元素雷同的元素？ 你可能会想：这容易呀，间接调用元素对象的 equals() 方法进行比较不就行了吗？ ...

download：Next.js+React+Node零碎实战，搞定SSR服务器渲染 复制下哉课程ZY：https://www.97yrbl.com/t-1391.html @Componentpublic class RedisUtil { public static RedisUtil util; public RedisUtil(@Autowired JedisPool jedisPool) { this.jedisPool = jedisPool; RedisUtil.util = this; } public static RedisUtil getInstance(){ return util; } @Autowired private JedisPool jedisPool; /** * 向Redis中存值，永恒无效 */ public String set(String key, String value) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.set(key, value); } catch (Exception e) { return "0"; } finally { jedis.close(); } } /** * 依据传入Key获取指定Value */ public String get(String key) { Jedis jedis = null; String value; try { jedis = jedisPool.getResource(); value = jedis.get(key); } catch (Exception e) { return "0"; } finally { jedis.close(); } return value; } /** * 校验Key值是否存在 */ public Boolean exists(String key) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.exists(key); } catch (Exception e) { return false; } finally { jedis.close(); } } /** * 删除指定Key-Value */ public Long del(String key) { Jedis jedis = null; try { jedis = jedisPool.getResource(); return jedis.del(key); } catch (Exception e) { return 0L; } finally { jedis.close(); } } /** * 分布式锁 * @param key * @param value * @param time 锁的超时工夫，单位：秒 * * @return 获取锁胜利返回"OK"，失败返回null */ public String getDistributedLock(String key,String value,int time){ Jedis jedis = null; String ret = ""; try { jedis = jedisPool.getResource(); ret = jedis.set(key, value, new SetParams().nx().ex(time)); return ret; } catch (Exception e) { return null; } finally { jedis.close(); } } public void pub(){ jedisPool.getResource().publish("test","msg"); } }

理解如何应用 LeanCloud 创立数据库并应用 Next.js 创立带有服务端的应用程序。前言通过本教程您将理解到： 应用 LeanCloud 作为收费数据库应用 Next.js 开发一个蕴含前后端的利用将利用公布到 Vercel应用 Tailwind 轻松设置款式咱们将创立一个用于影视剧打分利用，我将它部署在 rec.zehao.me，残缺源码我放在 2eha0/records 创立 Next.js 利用应用 Next.js 官网模板创立我的项目 & npx create-next-app --example with-tailwindcss my-app该指标曾经为您配置好以下内容： Next.js 最新版本TypeScriptTailwind CSS & 主动去除未应用的类名Next.js API 路由示例创立前端组件当初咱们能够开始创立组件了，pages/index.tsx 是利用的入口文件，咱们先来批改整体布局 // pages/index.tsximport type { NextPage } from 'next'import Head from 'next/head'const Home: NextPage = () => { return ( <div className='mx-[3.5rem] min-w-[15rem] max-w-full sm:mx-auto sm:w-[30rem] font-sans'> <Head> <title>我看过的</title> <meta name="viewport" content="width=device-width" /> <link rel="icon" href="/favicon.ico" /> </Head> <h1 className='text-slate-300 flex justify-between items-center text-xl sm:text-5xl my-8 sm:my-20'> <span>我看过的</span> <span className='text-xs sm:text-xl'>电影 / 动漫 / 剧 / 书</span> </h1> </div> )}export default Home接下来，咱们须要为利用增加一个卡片组件，用于显示影视作品的信息，新建 components/card.tsx 文件 ...

前言next.js框架是支流的SSR框架，弱小的开箱即用加上社区十分沉闷让它可能在泛滥框架中怀才不遇。最近为了实现next.js页面之间来回跳转加上loading成果晋升用户体验写下这篇文章，心愿可能帮忙到大家。 操作首先，咱们来剖析一下实现原理，首先路由之间跳转启动与完结要有监听事件，用到的就是next.js的router监听事件 有了监听事件咱们就可能很好的管制页面之间的跳转。 接着咱们须要一个loading bar置顶到页面最下面，这里咱们会用到@tanem/react-nprogress这个插件。 yarn add @tanem/react-nprogress 接着，咱们关上这个地址，复制外面的代码到咱们的我的项目中。 1、新建globalLoading.js import React from 'react';import { useNProgress } from '@tanem/react-nprogress';const GlobalLoading = ({ isRouteChanging, }) => { const { animationDuration, isFinished, progress } = useNProgress({ isAnimating: isRouteChanging, }) return ( <> <style jsx>{` .container { opacity: ${isFinished ? 0 : 1}; pointerevents: none; transition: opacity ${animationDuration}ms linear; } .bar { background: #29d; height: 2px; left: 0; margin-left: ${(-1 + progress) * 100}%; position: fixed; top: 0; transition: margin-left ${animationDuration}ms linear; width: 100%; z-index: 1031; } .spinner { box-shadow: 0 0 10px #29d, 0 0 5px #29d; display: block; height: 100%; opacity: 1; position: absolute; right: 0; transform: rotate(3deg) translate(0px, -4px); width: 100px; } `}</style> <div className="container"> <div className="bar"> <div className="spinner" /> </div> </div> </> )};export default GlobalLoading;2、批改_app.js ...

Next.js酷在哪里？之前应用 Next.js + strapi 做了一个简略博客站点也顺道写了一篇 Next.js 扼要教程，之后 Next 自身始终在迅猛发展。利用代 js 能力来说做到了： 极佳的开发体验极佳的网站最佳的”动“，“静”均衡从个性上来说，反对： SSR(Server Side Rendering)提供 getServerSideProps 办法，在用户拜访时申请数据，实用于实时数据页面。SSG(Static Site Generation)提供 getStaticProps，getStaticPaths 办法来事后生产动态页面；而更酷的一点是：应用 fallback，revalidate 来反对肯定的动态性。 这种能“动”的 SSG 天然是我所须要的，放弃动态拜访，而又能在我新增修改文章的时候，站点可能自动更新。绝佳！！ 为什么还须要来Webify“折腾”一番？既然下面曾经很酷了，为什么会有明天的文章，为什么还须要折腾一番？ 起因也很简略：老本略高，为了不错的访问速度，你须要一台性能不错的虚拟机，肯定的带宽。对于个别集体博客，投入不划算。 在这里就隆重地有请咱们的解决方案：腾讯云开发Webify，简略来说就是相似 vercel 的 Serverless 托管服务，不过反对更多的框架，而且是国内服务商，便宜且访问速度一流。 有图为证： 而且当初托管，能收费领300元无门槛代金券，香啊~感兴趣的能够点击下方链接理解一下：https://cloud.tencent.com/developer/article/1871549 CloudBase Webify实战对于个别文章应用相似 github 治理的就简略了，Webify反对版本 Github、Gitlab、Gitee 服务商，据说行将反对 Coding： Vue.js (vue-cli)React.js (create-react-app)HexoGatsby.jsAngularNext.js SSGNuxt.js SSG以及主动适配框架以本博客 next 为例，Webify实际上应用时了 next export 的能力，构建后，间接部署动态文件到 server。 如果你的博客文章，间接应用 md，git 治理，看到这里就OK了，git 提交，Webify主动会重新部署你的站点。cool～～ 问题是如果你的站点数据来源于相似 strapi 这种 serverless cms 怎么办？next export 不反对next SSG中“动”的个性（fallback，revalidate）。 Webify高阶——自动化Webify其实办法也很简略，加一个桥接服务，让你的 serverless cms 的更新变动到 git 就好。 ...

const detail = () => { // pages/news/[id].jsx // next只反对query不反对params，as参数是为了好看 router.push({ pathname:'/news', query:{ id: 1 }, }, '/news/1')

前言最近我的项目中应用SSR框架next.js，过程中会遇到token存储，状态治理等一系列问题，当初总结并记录下来分享给大家。 Token存储SSR和SPA最大的区别就是SSR会辨别客户端Client和服务端Server，并且SSR之间只能通过cookie能力在Client和Server之间通信，例如：token信息，以往咱们在SPA我的项目中是应用localStorage或者sessionStorage来存储，然而在SSR我的项目中Server端是拿不到的，因为它是浏览器的属性，要想客户端和服务端同时都能拿到咱们能够应用Cookie，所以token信息只能存储到Cookie中。 那么咱们选用什么插件来设置和读取Cookie信息呢？插件也有好多种，比方：cookie、js-cookie、react-cookie、nookie、set-cookie-parser等等，然而它们有个最大的问题就是须要手动去管制读取和设置，有没有一种插件或者中间件主动获取和设置token呢？答案是必定的，就是接下来咱们要用到的next-redux-cookie-wrapper这个插件，它是next-redux-wrapper插件举荐的，而next-redux-wrapper插件是连贯redux中store数据的插件，接下来会讲到。 数据长久化SSR我的项目咱们不倡议数据做长久化，除了下面的token以及用户名等数据量小的数据须要长久化外，其它的都应该从后盾接口返回，否则就失去了应用SSR的目标(间接从服务端返回带有数据的html)了，还不如去应用SPA来得间接。 状态治理如果你的我的项目不是很大，且组件不是很多，你齐全不必思考状态治理，只有当组件数量很多且数据一直变动的状况下你须要思考状态治理。 咱们晓得Next.js也是基于React，所以基于React的状态管理器同样实用于Next.js，比拟风行的状态治理有： mobxreduxredux-toolkit(redux的简化版)recoil(react官网出品)rematch(模块化做得比拟好的)这里有一篇文章专门介绍比照它们的，大家能够看看哪种比拟适宜本人。 最初咱们选用的是redux的轻量级版本：redux-toolkit。 上面咱们会集成redux-toolkit插件及共享cookie插件next-redux-cookie-wrapper以及连贯next.js服务端与redux store数据通信办法getServerSideProps的插件next-redux-wrapper。 集成状态管理器Redux及共享Token信息首先咱们先创立next.js我的项目，创立完之后，咱们执行上面几个步骤来一步步实现集成。 创立store/axios.js文件批改pages/_app.js文件创立store/index.js文件创立store/slice/auth.js文件0. 创立store/axios.js文件创立axios.js文件目标是为了对立治理axios，不便slice中axios的设置和获取。 store/axios.js import axios from 'axios';import createAuthRefreshInterceptor from 'axios-auth-refresh';import * as cookie from 'cookie';import * as setCookie from 'set-cookie-parser';// Create axios instance.const axiosInstance = axios.create({ baseURL: `${process.env.NEXT_PUBLIC_API_HOST}`, withCredentials: false,});export default axiosInstance;1、批改pages/_app.js文件应用next-redux-wrapper插件将redux store数据注入到next.js。 pages/_app.js import {Provider} from 'react-redux'import {store, wrapper} from '@/store'const MyApp = ({Component, pageProps}) => { return <Component {...pageProps} />}export default wrapper.withRedux(MyApp)2、创立store/index.js文件应用@reduxjs/toolkit集成reducer并创立store，应用next-redux-wrapper连贯next.js和redux，应用next-redux-cookie-wrapper注册要共享到cookie的slice信息。store/index.js import {configureStore, combineReducers} from '@reduxjs/toolkit';import {createWrapper} from 'next-redux-wrapper';import {nextReduxCookieMiddleware, wrapMakeStore} from "next-redux-cookie-wrapper";import {authSlice} from './slices/auth';import logger from "redux-logger";const combinedReducers = combineReducers({ [authSlice.name]: authSlice.reducer});export const store = wrapMakeStore(() => configureStore({ reducer: combinedReducers, middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend( nextReduxCookieMiddleware({ // 在这里设置你想在客户端和服务器端共享的cookie数据，我设置了上面三个数据，大家按照本人的需要来设置就好 subtrees: ["auth.accessToken", "auth.isLogin", "auth.me"], }) ).concat(logger)}));const makeStore = () => store;export const wrapper = createWrapper(store, {storeKey: 'key', debug: true});创立store/slice/auth.js文件创立slice，通过axios调用后盾接口返回token和user信息并保留到reducer数据中，下面的nextReduxCookieMiddleware会主动设置和读取这里的token和me及isLogin信息。 ...

基于 Firebase 数据库和 Next.js 框架的 GitHub Profile 的访问量统计图标. 操作指南第一步: ForkFork 以后我的项目. 第二步: 配置 Firebase注册您集体的 Firebase 账户: 点击 开始 并 增加我的项目.创立实时数据库并抉择 测试模式.数据库的构造应如下图所示: 请将规定都改成 true: 第三步: 部署在 Vercel用您的 Github 账号登入到 Vercel.抉择方才 fork 的我的项目.找到 设置, 增加 环境变量, 名称 输出为 FIRE_BASE_URL 并输出第二步中创立的 Firebase 数据库链接: 最初, 您能够抉择最新推上去的 commit 并重新部署, 不出所料的话所有都会顺利. 第四步: 更新 Github Profile只需在 README.md 中插入下方的代码: 参考我的项目当初 GitHub 有很多优良的访问量统计的开源我的项目，我筛选其中两个我最喜爱的我的项目供大家学习参考: Tool from antonkomarev - 这是我过来几个月最长应用的我的项目，然而最近可能用户增多了，延时很高遂弃.Tool from Ryan Lanciaux - 极客 UI, 如果想本人部署在 Glitch 上的话要留神服务器会进入睡眠的问题.共享源码在 GitHub, 喜爱的加个星～ 欢送任何 issue 和 PR! ...

昨晚 next.js.cons 召开 ，会议公布了 next.js 11 版本以及 next.js Live，来看看重要内容！ 新个性：Conformance：提供精心制作的解决方案以反对用户最佳体验的零碎。性能改良：进一步优化以改善冷启动工夫，以便您能够更快地开始编码。next/script：主动优先加载第三方脚本以进步性能。next/image：缩小布局移位，通过主动尺寸检测和反对含糊占位符发明更晦涩的视觉体验。Webpack 5：当初默认为所有 Next.js 应用程序启用，这能够为所有 Next.js 开发人员带来这些益处。创立反馈应用程序迁徙（试验）：主动转换创立反馈应用程序以兼容 Next.js。Next.js Live（预览版）：与您的团队实时在浏览器中编写代码。通过运行并参考上面的迁徙指南立刻更新。 https://nextjs.org/blog/next-... npm i next@latest react@latest react-dom@latest Conformance即便有弱小的工具和框架中的主动优化，网站所有者和应用程序开发人员也常常被要求成为 UX 品质主题的专家，例如性能、安全性和可拜访性。随着性能的增加和团队的扩大，开发人员须要以不同的形式思考。 通过他们致力于构建大型 Web 应用程序（如搜寻和地图），Google 曾经证实，随着团队和应用程序的扩大，框架能够在放弃品质方面施展关键作用。通过利用弱小的默认和爱护零碎，它们使开发人员可能更多地关注性能和产品。 明天，Google 的网络平台团队曾经开始应用 Conformance for Next.js 来开源他们的零碎。 Conformance 是一个零碎，它提供精心设计的解决方案和规定以反对最佳加载和 Core Web Vitals，并进一步增加反对其余品质方面，如安全性和可拜访性。这些解决方案使您的团队无需记住所有最新规定以获得最佳加载性能，同时依然让您可能灵便地为您的应用程序做出正确的抉择。 除了由性能钻研反对的许多根底优化外，Next.js 11 当初开箱即用地反对 ESLint，以便在开发过程中更轻松地捕捉特定于框架的问题，并为您的团队设置指导方针，以确保即便在扩大时也能获得最佳实际。 要开始应用 ESLint，请在降级到 Next.js 11 后运行。ESLint 集成实用于新的和现有的 Next.js 应用程序，提供一组新规定来帮忙开发人员构建更好的应用程序。 npx next lint $ npx next lintWe created the .eslintrc file for you and included the base Next.js ESLint configuration../pages/about.js7:9  Warning: Do not include stylesheets manually. See: https://nextjs.org/docs/messages/no-css-tags.  @next/next/no-css-tags10:7  Warning: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.  @next/next/no-sync-scripts./pages/index.js4:10  Warning: Do not use the HTML <a> tag to navigate to /about/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pagesNeed to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules✨  Done in 1.94s.性能优化从 Next.js 10 开始，咱们始终专一于改善 Next.js 的开发者体验。在 10.1 和 10.2 中，咱们将启动工夫缩短了 24%，并通过 React Fast Refresh 将更改的解决工夫再缩小了 40%。仅仅通过放弃 Next.js 更新，您就曾经取得了这些惊人的速度改良。 ...

NextjsNextjs是什么？Nextjs长处Nextjs详解basic featurespages每个页面是和路由相干的，路由又是基于文件名称的Nextjs为每个页面提前生成html，而不是全副由客户端javaScript生成，预渲染会使页面性能和SEO更好两种模式的预渲染：动态生成和服务端渲染 动态渲染：在构建阶段生成html并且在每个申请中复用服务端渲染：每次申请中生成html出于性能思考，咱们倡议应用动态生成而不是服务器端出现。动态生成的页面能够被CDN缓存，不须要额定的配置来进步性能 RoutingDynamic RoutesCatch all routesnext/link or next/routershallow routing在扭转路由时不运行获取数据的形式，比方 getServerSideProps, getStaticProps, and getInitialProps.

NextjsNextjs v10内置Image组件实现主动图片优化性能<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">import Image from 'next/image'<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">实现懒加载 在看到图片时再渲染图片尺寸固定，防止渲染时布局发生变化从新渲染界面图片自适应安装属性属性名必填作用备注src是图片起源 width是图片宽度layout="fill" 可不填height是图片高度layout="fill" 可不填layout否当视口扭转大小时，图像的布局行为属性值见下方loader否用于解析url的自定义函数()=>stringsizes否图片大小layout="responsive" or layout="fill"quality否优化图片1-100 默认75priority否优先级预渲染的优先级较高layout属性值 fixed：图片固定 不会因为视口的扭转而扭转图片的大小intrinsic：视图窗口较小时放大图片 但不会放大图片responsive：随着视图窗口的变动而自适应fill：将图片拉伸到父元素尺寸国际化路由依据路由来判断翻译成哪种语言 Subpath routing(/nl-nl/blog and /en/blog) // next.config.js module.exports = { i18n: { locales: ['en', 'nl'], defaultLocale: 'en' } }Domain routing(example.nlandexample.com) // next.config.jsmodule.exports = { i18n: { locales: ['en', 'nl'], domains: [ { domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.nl', defaultLocale: 'nl' } ] }}禁止国际化映射// next.config.jsmodule.exports = { i18n: { localeDetection: false, },}Next.js Analytics掂量用户理论性能并加以调整 ...

阿里云播放器阐明文档 思考在目前的阿里云播放器中，没有提供相干的npm包，所以对开发来说非常不敌对。在明天的开发过程中接触到了NextJS，因为我的项目须要所以进行了NextJS的阿里云播放器接入，以下是过程记录。 因为NextJS不能获取到window和document，故勾销用createElement异步创立引入脚本和款式。运行步骤组件引入 {this.state.showPlayer&&<Apliplayer config={playerConfig} onGetInstance={instance => console.log('player ', instance)}></Aliplayer>}应用state对播放器进行显示是因为播放器在文件没有配置残缺的状况下先单独实现渲染，导致无奈获取到配置文件，所以须要再配置实现时再将播放器进行展现 相干文件 components/aliplayer/index.js //播放器外围文件pages/player.js //组件调用页面实现形式一、创立相干代码 index.js //组件代码import React, {Component} from 'react'class Aliplayer extends Component { state = { id: null, config: null, onGetInstance: null, } componentWillMount() { const id = `aliplayer-${Math.floor(Math.random() * 1000000)}`; this.setState({id}) } componentDidMount() { let {config, onGetInstance} = this.props if (!config) { throw new Error('Missing Aliplayer config'); } const player = this.player const {id} = this.state if (!id || player.current) { return } const Aliplayer = window.Aliplayer; if (player.current) { return } player.current = new Aliplayer({ ...config, "id": id, }, (player) => { onGetInstance && onGetInstance(player); }); } render() { const {id} = this.state return (<div ref={ref => this.player = ref} id={id}></div>) }}export default Aliplayerplayer.js此次将资源文件通过援用该组件的Head插入，因为在组件引入资源文件时会产生申请不到 new Aliplayer()。如果调用的页面比拟多，能够放在母版页进行引入， ...

我的项目介绍Next.js一款比拟热门的React服务器端渲染框架。让你的网页领有SEO能力。Next-Webchat基于next+react+redux+antd+rlayer等技术实现的仿微信PC网页端聊天我的项目。实现了音讯表情混合发送、图片/视频预览、拖拽/粘贴截图发送、红包/朋友圈等性能。 技术框架技术架构：next.js+react+RreduxUI组件库：Antd (蚂蚁金服react组件库)字体图标：阿里iconfont图标库弹窗组件：RLayer（react.js自定义对话框）虚构滚动：RScroll（react.js自定义滚动条）成果预览 如果想让你的网页也能领有SEO性能，那么Next.js是一个不错的抉择。只有会React，上手就很容易了。https://www.nextjs.cn/https://github.com/vercel/nex... Next|React自定义弹窗组件我的项目中用到的所有弹窗均是本人开发的RLayer组件。RLayer 基于react.js开发的PC端自定义弹框组件。反对超过30+参数自在配置，通过笨重的布局设计、极简的调用形式来解决简单的弹出层性能，为您呈上不一样的弹窗成果。感兴趣的话，能够去看看之前的这篇分享文章。https://segmentfault.com/a/11... Next|React自定义滚动条组件我的项目中用到的滚动条也是本人开发的一款PC桌面端虚构丑化滚动条组件RScroll。Rscroll.js反对原生滚动条、是否自动隐藏、滚动条大小/层级/色彩等性能。 Next公共模板新建layouts/index.js文件用于页面主入口模板。 function Layout(props) { const router = useRouter() // 拦挡验证 useEffect(() => { // ... }, []) return ( <> {/* 配置公共head信息 */} <Head> <title>Next.js聊天室</title> <link rel="icon" href="/favicon.ico" /> <meta name="keywords" content="Next.js|React.js|Next.js聊天室|Next.js仿微信|React聊天实例"></meta> <meta name="description" content="Next-WebChat 基于Next.js+React+Redux构建的服务端渲染聊天应用程序"></meta> </Head> <div className="next__container flexbox flex-alignc flex-justifyc"> <div className={utils.classNames('next__wrapper')} style={{ backgroundImage: `url(${props.skin})` }}> <div className="next__board flexbox"> {/* 右上角按钮 */} <WinBar {...props} /> {/* 侧边栏 */} <Sidebar {...props} /> {/* 两头栏 */} <Middle /> {/* 主体布局 */} <div className="nt__mainbox flex1 flexbox flex-col"> {props.children} </div> </div> </div> </div> </> )}Head组件用于配置一些页面SEO信息，如：title、keyword、description及图标icon等信息。 ...

dev环境和test环境以及pro环境的接口不一样，因为上线之前毕竟是须要测试的。这就须要咱们来打不同的包来便于测试。在nextjs中，只须要简略的配置就能够实现咱们须要的工作，我之前做的时候是依据官网文档写的建设 .env.development , .env.production以及 .env.test,然而打test包之后总是报一个有限循环的bug，试了很久也没解决，如果有相熟的小伙伴欢送留言探讨。 目前我用的是另一个办法。 咱们建设好nextjs框架之后，找到package.json这个文件，批改其中的 "scripts": { "dev": "NEXT_PUBLIC_DOMAIN_ENV=development next dev", "build": "NEXT_PUBLIC_DOMAIN_ENV=production next build && next export", "start": "next start", "test":"NEXT_PUBLIC_DOMAIN_ENV=test next build && next export" }其中 next build && next export 是打包动态文件到cdn用的。次要是后面加了 NEXT_PUBLIC_DOMAIN_ENV=test 至关重要。而后我在根目录加了个config文件夹,新建servicePath当做接口地址文件，相熟react和vue框架的同学应该对这个很相熟了，axios获取接口的时候用这个很不便(当然文件夹跟文件名称并不是固定的，小伙伴们能够依据本人的须要来取),以下附上我的servicePath.js的内容 let ipUrl = null; //接口if(process.env.NEXT_PUBLIC_DOMAIN_ENV==="production"){ //生产环境接口地址 ipUrl="http://127.0.0.1:7001"}else { //开发以及测试环境接口地址(我这里开发环境和测试环境是一样的接口) ipUrl="http://128.0.0.1:7005"}let servicePath = { getArticleList: ipUrl + "/getArticleList", //首页接口};export default servicePath;而后在你的页面里引入import servicePath from '../config/servicePath' 剩下的应用就不跟大家过多介绍啦。 最初npm run build 就是生产环境打包，npm run test 就是测试环境打包。 ...

css-vars-ponyfill通过css变量来实现网页换肤的过程中，会呈现兼容性问题。 为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，然而在ie浏览器下，css-vars-ponyfill 的在nextjs下体现不佳，次要缺点是因为页面是服务端渲染，因而用户在看到界面后，动静主题色等款式不能很快渲染好，而是有一个过渡的工夫（css-vars-ponyfill 仅反对client-side），色彩会存在显著替换的过程用户体验差。通过浏览源码能够看到，cssVars须要等到浏览器contentLoaded之后，才会触发，否则始终监听dom的data content事件，这就导致了体验上的问题。 解决方案1.解析速度通过把间接去除document.readyState !== 'loading' 这样的限度条件使得浏览器在解析到，而后更改css-vars-ponyfill 的引入形式（旧的引入形式是在nextjs中的mainjs中引入module，而后间接调用cssVars()，这样在调用到ponyfill的脚本前还会解析其余不相干的chunk，为了更快的解析css变量，须要手动抉择插入地位），更改之后的css-vars-ponyfill 通过找到css变量的地位（nextjs 通过将不同组件下的style，对立打包在header外面），而后将更改后的ponyfill 插入到style 之后进行调用，这一步抉择在服务端渲染的 _document.tsx 文件中更改。 2.解析稳定性通过手动更改文件解析地位，以及对源码的条件触发机制进行相干更改，首页色彩渲染速度有了肯定晋升。然而仍存在一个问题，即通过路由跳转的界面，如果有新的style chunk，插入时不能进行无效的css变量解析（已尝试配置cssVars的option 关上MutationObserver）。因而，解决方案是通过判断UA，来让ie等浏览器下所有的路由通过a标签跳转，触发css-ponyfill的从新解析执行。 export function browser() { const UA = window.navigator.userAgent if (UA.includes("qqbrowser")) return "qqbrowser" if (UA.includes("baidu")) return "baidu" if (UA.includes("Opera")) return "Opera" if (UA.includes("Edge")) return "Edge" if (UA.includes("MSIE") || (UA.includes("Trident") && UA.includes("rv:11.0"))) return "IE" if (UA.includes("Firefox")) return "Firefox" if (UA.includes("Chrome")) return "Chrome" if (UA.includes("Safari")) return "Safari"}type CommonLinkProps = { children: ReactElement href?: string target?: string outerLink?: boolean styles?: unknown}export default function CustomLink(props: CommonLinkProps) { const { children, href, target, as, outerLink, styles = emptyStyles } = props const [isIE, setIE] = useState<boolean>(false) const cloneEl = (c: ReactElement, props?: any) => React.cloneElement(c, { href: as ?? href, target, ...props }) useEffect(() => { if (["IE", "qqbrowser", "baidu"].includes(browser())) { setIE(true) } }, []) function renderLink() { if (Children.only(children).type === "a") { const node = cloneEl(children as ReactElement) return node } else { let fn: () => void | null = null if (outerLink) { fn = () => { window.open(as ?? href) } } else { fn = () => { window.location.href = as ?? href } } const node = cloneEl(children as ReactElement, { onClick: () => { fn() }, }) return node } } return ( <> {!href ? ( children ) : isIE ? ( renderLink() ) : ( <Link {...props}>{children}</Link> )} <style jsx>{styles}</style> </> )}这里children的type 抉择了ReactElement，而不是插槽中通常反对的ReactNode 次要是不想思考直接插入字符串这种状况，会减少问题的复杂度，因而间接在type这层做限度。还有Fragments 也没有思考，且没有找到无效的Fragments 类型，没法在ReactNode 中把它Omit掉，nextjs 外面的Link 如果首层插入了Fragments 后，也无奈失常跳转，可能起因也是无奈再Fragments 下面绑定无效的事件吧，目前Fragments（16.13.1） 只反对key属性，心愿后续能够优化。 ...