NextJS

react 全栈概念学习

学习内容1.NextJS—r
Chatwei·2023-08-18 23:18

NextJs - Error Handling （错误处理）

Error.js的作用使用error.js文件规则，可以优雅地处理嵌套路由中的意外运行时错误。在ReactErrorBoundary中自动封装路由段及其嵌套子段。使用文件系统层次结构来调整粒度，为特定网段量身定制错误UI。将错误隔离到受影响的网段，同时保持应用程序其他部分的功能。添加功能，尝试在不重新加载整个页面的情况下从错误中恢复。通过在路由段内添加error.js文件并导出React组件来创建
莓莓儿～·2023-08-18 18:10

NextJs - Middleware(中间件)

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。中间件在缓存内容和路由匹配之前运行。使用规则使用项目根目录中的文件middleware.ts（或.js）来定义中间件。例如，与页面或应用程序处于同一级别，或者在src内部（如果适用）。//middleware.tsimport{NextResponse}from'next/se
莓莓儿～·2023-08-18 18:39

探索Next.js 13.4版本的升级与优化

原文地址：https://nextjs.org/blog/next-13-4Next.js13.4是Next.js的一个基础版本发布，标志着应用AppRouter的稳定性。
汽车之家客户端前端团队·2023-08-18 18:08

nextjs 导出静态文件，刷新404？

以前的spa单页面的nginx配置try_files$uri/index.html;仔细看打包出来的dist目录，发现每个路由都生成了对应的*.html文件。所以修改nginxnginx配置如下：location/{#将以.html结尾的请求添加Cache-Control头信息if($uri~*\.(html)$){add_headerCache-Control"private,no-store,
·2023-08-18 16:03

nextjs中使用image图片

使用nextjs的组件：importImagefrom"next/image";加入允许跨域：在next.config.js中加入constnextConfig={images:{domains:["images.doc.ceo
姚*鸿的博客·2023-08-13 15:04

使用next.js编写TodoList(连接了数据库)(提供源码)

准备安装next可以查看nextjs入门使用_姚*鸿的博客的博客-CSDN博客安装Prisma可以查看使用Prisma访问数据库_姚*鸿的博客的博客-CSDN博客确保你前面两个步骤做完。
姚*鸿的博客·2023-08-12 15:58

Unhandled Runtime ErrorError: Event handlers cannot be passed to Client Component props. ＜input id=

nextjs出现UnhandledRuntimeErrorError:EventhandlerscannotbepassedtoClientComponentprops.
姚*鸿的博客·2023-08-11 02:23

Tailwind css优于Bootstrap 7个原因

如果与NextJS和类似框架一起使用，Tailwind将生成显着较低的css占用空
解道Jdon·2023-08-07 07:55

Nextjs12结合TypeScript+Mobx6+antd+less初体验

Next.js是什么Next.js是一个轻量级的React服务端渲染应用框架。它支持多种渲染方式：客户端渲染、静态页面生成、服务端渲染。使用Next.js实现SSR是一件很简单的事，我们完全可以不用自己去写webpack等配置，Next.js都帮我们做好了。为什么要使用TypeScript通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误，对于JavaScript动态的弱类型语言，虽然灵活性高，
猿小莫·2023-08-05 18:31

Next.js

文章目录关于Next.js关于Next.jsNext.js:TheReactFrameworkfortheWeb官网：https://nextjs.org/教程Next.JS极简教程https://www.bilibili.com
伊织code·2023-07-28 05:42

【从零开始NextJS】3)配置eslint与gitignore

1/安装eslintts-eslintnpmi--save-deveslint@typescript-eslint/parser@typescript-eslint/eslint-plugin2/配置eslintconfig根目录下新建.eslintrc.jsmodule.exports={root:true,parser:'@typescript-eslint/parser',plugins:[
吴小思被占用·2023-07-26 02:10

react当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。使用Context配合

在nextjs项目中，发现两个组件没啥关系，例如一个是一直存在的头部组件，另一个是页面中的组件，当我点击头部组件中的特定按钮时，把数据传递到页面组件中，页面组件接受到canshu数据后在做其他操作，那么他们两个如何通讯
D浩DzD·2023-07-25 13:21

Nextjs 中使用Jquery JS脚本加载

1、页面中引入importScriptfrom"next/script";2、引入你放在public目录下的JS代码$("#xxml").css("color","red").css("font-size","20px");注意strategy属性会影响JS脚本的加载顺序，确保JQuery脚本先加载，更多介绍见官方文档：基本特性:ScriptOptimization|Next.js|Next.js
Dragon Wu·2023-07-25 02:24

Nextjs 配置使用antd

Next.js中不能直接使用css，需要自己安装插件。插件安装yarnadd@zeit/next-cssantdbabel-plugin-import配置文件的写入next.config.jsconstwithCss=require('@zeit/next-css')if(typeofrequire!=='undefined'){require.extensions['.css']=file=>{
weyde·2023-07-21 05:46

React to NextJS Step by Step guide

https://selleo.com/blog/why-and-how-to-migrate-a-react-application-to-next-jsclient-sideroutingisoptimizedwithprefetching1.CreateaNextapp2.recreateyourroutescreateyourroutestructureusingfoldersandfile
zJanetHK·2023-07-20 05:16

Next.js框架入门笔记

内置组件‘pages/_document.js’文件，自定义documentDOC：https://www.nextjs.cn/docs/advanced-features/custom-document
只会写Bug的程序员·2023-07-15 06:25

【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP

在了解到前端路之后又发现单页面于应用与多页面应用的不同之处，以及.nextjs数据抓取选择CSR、SSR、SSG、ISP不同形式也是有区别的。
UiNMX_唐·2023-07-14 22:42

Nextjs 的 App Router 路由模式核心概念简介

NextjsAppRouter简介Next.js13引入了新的应用路由器，它建立在服务端组件之上，支持布局、嵌套路由、加载状态、错误处理等等。本文将介绍AppRouter新路由模型的基本概念。术语树(Tree):一种用于可视化的层次结构。例如，包含父组件和子组件的组件树，文件夹结构等。子树(Subtree):树的一部分，从新的根节点（第一个）开始，到叶子节点（最后一个）结束。根节点(Root):树
AaronZZH·2023-07-13 16:24

关于对前端体系的思考与总结

做过ssr（nextjs），seo优化等等。完全没用过vue，或者其他的框架。今年跟着人一起出来做东西，大佬说让用vue做后台，我本来不大愿意，但是大佬张嘴了，那就搞吧。
JiangHaoFunc·2023-06-21 19:11

00. 把react JS, SPA 转换为 Next JS 系列教程

前言：把一个由React实现的后台管理系统模版，转换为NextJS。
zJanetHK·2023-06-13 01:52

从未尝试过的 7 种处理 CSS 的方法

因此，今天我们将深入探讨使用NextJS为React应用程序编写CSS的七种不同方法（如果这不是您的问题，请不要担心；这些概念也适用于其他地方）。系好安全带，准备好进行权衡取舍！
jascl·2023-06-08 17:25

使用Nextjs快速开发全栈导航网站

背景随着ChatGPT的火热，国外很多开发者快速响应，应用于不同场景的AI应用井喷式的爆发，并且基本集中在web领域应用，而在快速开发的背后，我们可以看到，开发者大多选择Next.js或者Nuxt.js全栈框架来开发，以快速验证自己的产品。这种选型的背后，我觉得主要原因有：SEO的重要性国外更加注重SEO的重要性，国内搜索引擎大多是靠花钱买搜索流量，包括小程序、App这类对SEO的需求并不大Edg
·2023-06-07 22:55

Nextjs实战记录

动态表单初始化必须给{}赋值表单的name与值，否则会报不受控（即使是遍历出来的表单）动态样式方案一：CSSModule+classnamesimportclassNamesfrom'classnames'functionRender(){return({idx})}Notes:CSSModules不支持连字符、下划线衔接。.fragment{background:rgba(0,0,0,0.06)
·2023-04-19 18:56

Nextjs实战记录

动态表单初始化必须给{}赋值表单的name与值，否则会报不受控（即使是遍历出来的表单）动态样式方案一：CSSModule+classnamesimportclassNamesfrom'classnames'functionRender(){return({idx})}Notes:CSSModules不支持连字符、下划线衔接。.fragment{background:rgba(0,0,0,0.06)
·2023-04-18 22:23

route-resource-preload 拆包，尽最大努力减少首屏幕加载资源，并提供优质的用户体验

route-resource-preload专注于不影响用户最佳体验的同时，提升应用首屏加载速度，灵感来自NextJS的预加载.gif效果图正常懒加载.gifroute-resource-preload
·2023-04-18 22:54

nextjs自己写ui中input框效果

有需求要实现这样input输入框，所以就开始自己写一个，样式和代码如下：.form_block{position:relative;text-align:left;}.form_con{display:block;position:relative;border:1pxsolid#BBBBBB;border-radius:2px;min-height:56px;color:#000;font-si
丹华666·2023-04-14 11:00

ChatGPT文本补全Text completion API中nextjs中stream输出的方法

chatGPT的强大已经火起来了，其中的文本补全TextcompletionAPI在nextjs中已流的方式，像打字的效果，官方api告诉我们需要将请求参数stream:true这个样设置后，并没有出现打字一样的效果
丹华666·2023-04-14 11:29

openai文本补全chatgpt，用nextjs以流输出结果的方法二

上一篇讲到openai文本补全功能，nextjs给出参考的例子，但是这个例子有很多弊端，不好用，所以又查找大量资料后，用axios可以实现流的输出。为什么要用流输出？
丹华666·2023-04-14 11:29

Egg开发项目实践纪实

web服务端框架背景介绍市面主要流行的有Express、Koa2、Egg、NextJs等Express.js是Node.JS诞生之初，最早出现的一款框架，现在仍
山岚雾丘泽·2023-04-13 23:38

nextjs加入antd按需加载配置方法

.babelrc文件下，按照antd文档按需加载加入；{"presets":["next/babel"],"plugins":[["import",{"libraryName":"antd","style":"css"}]]}next.config.js文件里面加入webpack(config,{isServer}){if(isServer){constantStyles=/antd\/.*?\/
坚韧难囚·2023-04-13 08:58

5 difficulties : converting CRA to NextJS

1.convertingacratoSSRhttps://dev.to/coderdan/5-issues-i-encountered-while-converting-a-create-react-app-to-ssr-and-how-i-solved-them-4lje#:~:text=To%20convert%20your%20CRA%20app,component%20found%20in
zJanetHK·2023-03-29 02:55

Nextjs

一、Next.js介绍Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.支持两种预渲染方式,静态生成和服务器端渲染.基于页面的路由系统,路由零配置自动代码拆分.优化页面加载速度.支持静态导出,可将应用导出为静态网站.内置CSS-in-JS库styled-jsx方案成熟,可用于生产环境,世界许多公司都在使用应用部署简单,拥有专属部署环境Vercel,也可以部署在其他环境二
拾荒李·2023-03-27 05:15

nextjs 更新 route 但不刷新页面

我们在用nextjs的时候也希望类似的功能。我们去刷新表格数据，不刷新页面，但要改变页面的地址。保证我们后退能回到之前的页面。在nextjs中我们可以使用shallow模式。
Lupino·2023-03-20 19:04

next.js 采坑录（服务端渲染）

next官网文档：http://nextjs.frontendx.cn/1.安装脚手架create-next-app是next的脚手架会为你搭建好最基本的next框架。
沐雨芝录·2023-03-17 19:14

Next.js - 读取静态文件数据

参考代码示例数据在NextJS项目下添加文件./data/user.json，示例内容如下{"name":"Anoyi"}示例读取文件数据添加页面.
Anoyi·2023-03-12 15:24

【从零开始NextJS】2)Next 初始化 with typescript

npminit名字随便填,一路回车到底yes,生成package.jsonnpminstall--savereactreact-domnext3.package.json内添加"scripts":{"dev":"next","build":"nextbuild","start":"nextstart"}4.根目录新建tsconfig.json,新建pages文件夹,文件夹内建index.jsnpm
吴小思被占用·2023-03-10 09:43

【nextjs dev解决跨域问题】

1、安装插件yarnaddexpresshttp-proxy-middleware2、根目录下方添加文件server.js:内容如下//server.jsconstexpress=require('express')constnext=require('next')const{createProxyMiddleware}=require('http-proxy-middleware')constd
勤奋的小码农98·2023-02-24 21:11

服务端渲染框架next.js

nextjs是基于React的服务端渲染框架。
追梦人在路上不断追寻·2023-02-17 09:56

【HTML】重点知识内容~快速上手

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack和vite、Vue和React码源、NextJS
旺旺大力包·2022-12-03 21:26

【CSS】重点知识梳理，这样上手无压力

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack和vite、Vue和React码源、NextJS
旺旺大力包·2022-12-03 21:26

【CSS3】重点知识内容，快速上手

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack和vite、Vue和React码源、NextJS
旺旺大力包·2022-12-03 21:23

一文了解 NextJS 并对性能优化做出最佳实践

引言从本文中，我将从是什么，为什么，怎么做来为大家阐述NextJS以及如何优化NextJS应用体验。
·2022-10-30 23:45

理解微前端 - 从部署一套自己的前端开发环境(脚手架)开始

那么我们抛开类似nextjs、create-react-app这类的工具或框架，我们该如何从零部署一个属于自己的开发环境呢？
没位道·2022-10-26 15:07

【NextJS】一文了解 NextJS 并对性能优化做出最佳实践

引言从本文中，我将从是什么，为什么，怎么做来为大家阐述NextJS以及如何优化NextJS应用体验。
·2022-10-21 16:29

Resemi Admin - 一个漂亮的开箱即用的前端框架

简介ResemiAdmin是一个免费开源的中后台模版,使用了最新的NextJS12，React18，TypeScript等主流技术开发。
·2022-09-14 18:30

手撸Router，还要啥Router框架？react-router/vue-router躺一边去

有没有发现，在大家使用React/Vue的时候，总离不开一个小尾巴，到哪都得带着他，那就是react-router/vue-router，而基于它们的第三方框架又出现很多个性化约定和扩展，比如nuxtjs/nextjs
hiisea·2022-09-05 15:00

手撸Router，还要啥Router框架？让react-router/vue-router躺一边凉快去

有没有发现，在大家使用React/Vue的时候，总离不开一个小尾巴，到哪都得带着他，那就是react-router/vue-router，而基于它们的第三方框架又出现很多个性化约定和扩展，比如nuxtjs/nextjs
·2022-08-15 13:10

xzgz.top网站开发记录

xzgz.top网站记录主要技术栈应用主要是由koa构建，其中nextjs只负责页面构建完成服务端渲染。
·2022-08-11 23:00

Next.js 与 React 之间的比较

NextJS和React是前端Web开发人员社区中最受欢迎的两个工具。许多人很难识别Next.js和React之间的区别，然而，每一个都是为解决不同的问题而设计的。
粤嵌教育·2022-08-10 12:59
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他