React+Next.js+MaterialUI+Toolpad技术栈学习——安装
今天跟大家分享一个React+Next.js+MaterialUI技术栈的前端框架Toolpad。
相关资源
MaterialUI
Toolpad
框架效果
安装
运行安装命令
npx create-toolpad-app@latest your-app
cd your-app
npm run dev
文件结构
无身份认证
├── app
│ ├── (dashboard)
│ │ ├── layout.tsx
│ │ ├── page.t ...
Next.js lingui.js 多语言自动提取翻译键 - ats-node
组件依赖
{
"scripts": {
"i18n:extract": "lingui extract"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
],
"**/*.{weapp,jpg,png}": "node scripts/compress-images.mjs"
...
Next.js 中优雅地使用 Lottie 动画
前言：
在现代 Web 开发中，动画效果对于提升用户体验起着重要作用。Lottie 是 Airbnb 开发的一个强大的动画库，它可以解析通过 Adobe After Effects 创建并导出为 JSON 格式的动画。今天我们来看看如何在 React 项目中优雅地封装和使用 Lottie 动画。
安装依赖：
# npm
npm install l ...
Next.js 路由参数更新最佳实践：从 replaceState 到 nextReplaceState
问题背景
在 Next.js 应用开发中，我们经常需要在不刷新整个页面的情况下更新 URL 参数。常见场景包括：
Tab 切换
筛选条件更新
分页参数变化
搜索条件更新
最初，我们可能使用 history.replaceState 或类似的方法来实现：
// 传统方案
const replaceState = (params: Record<string, any>, is ...
js 迭代器next和生成器yield的区别
迭代器（Iterator）和生成器（Generator）是 JavaScript 中用于处理遍历和惰性求值的两个重要概念。它们密切相关，但有明显的区别。以下是它们的核心区别和联系：
1. 迭代器（Iterator）
定义：迭代器是一个对象，它实现了迭代器协议，即具有 next() 方法。
next() 方法：每次调用 next() 方法，返回一个包含 value 和 do ...
1.13
今天在搭建next.js的模板
来源：https://www.cnblogs.com/zeyangshuaige/p/18669371
LeetCode：141.环形链表
// 双指针 快+1=慢 true
class ListNode {
constructor(val, next) {
this.val = (val === undefined ? 0 : val)
this.next = (next === undefined ? null : next)
}
}
var hasCycle = function(head) {
let fast=head
let slow=head
while(fast&&slow&&fast.next){
if(fast.n ...
LeetCode：83.删除排序链表中的重复元素
LeetCode：83.删除排序链表中的重复元素
class ListNode {
constructor(val, next) {
this.val = (val === undefined ? 0 : val)
this.next = (next === undefined ? null : next)
}
}
var deleteDuplicates = function(head) {
let p=head
//head have val next
while(p&&p.next){
...
237.删除链表中的节点
237.删除链表中的节点
/**
* Definition for singly-linked list.
* function ListNode(val) {
* this.val = val;
* this.next = null;
* }
*/
/**
* @param {ListNode} node
* @return {void} Do not return anything, modify node in-place instead.
*/
var deleteNode = function(node) {
node.val ...
React 18 + Next.js 14 + Nest.js 全栈开发复杂低代码项目
本文将从以下几个方面介绍 React 18、Next.js 14、Nest.js 和低代码项目的技术特点及学习方法，并提供一些代码示例，帮助开发者了解如何利用这些技术开发复杂的低代码项目。
学习地址：可免费学习😊
一、React 18
技术特点
并发特性：React 18 引入了并发渲染，通过 startTransition 和 useDeferredValue 等 API，可以 ...
Export a named export for each HTTP method instead.(Next.js 15)
# Next.js 14
// src/app/api/product/route.ts
import prisma from '@/prisma/prisma'
import type { NextApiRequest, NextApiResponse } from 'next'
// GET /api/product
export default async function handle(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'GET') {
try {
const re ...
Error occurred prerendering page "/_not-found".(Next.js 15)
我们需要更新 UserProfile.tsx 组件，改用 Next.js 的 Link 组件而不是 react-router-dom 的 Link 组件。以下是解决方法：
这样可以确保组件更好地适应 Next.js 的框架，避免不兼容的问题。
# 错误的代码
'use client'
import React from 'react'
import { Box, Avatar, Typography, IconButton, Tooltip, useTheme } fro ...
Error: Attempted to call generateViewport() from the server （Next.js 15)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error Error: Attempted to call generateViewport() from the server but generateViewport is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component o ...
说说你对Next.js的理解
Next.js是一个基于React的开源JavaScript框架，由Vercel公司开发并维护。它通过提供一系列强大的功能，如服务器端渲染(SSR)、静态站点生成(SSG)、文件系统路由等，简化了React应用的构建过程，并优化了性能和开发体验。以下是我对Next.js的深入理解：
一、核心特性
服务器端渲染(SSR)：Next.js允许在服务器端渲染React组 ...
[cause]: TypeError: e_.createContext is not a function (Next.js 15)
开发 Next.js 项目遇到报错： [cause]: TypeError: e_.createContext is not a function
出现这个报错的原因是在 Next.js 项目中，在 Server Component 中使用了MUI组件，但是MUI组件没有做 SSR 适配就会导致这个报错。
解决办法
解决办法就是在文件顶部添加 use client 声明，让组件变成&n ...
Next.js 14 基础入门：从项目搭建到核心概念
Next.js 14 带来了许多激动人心的新特性，包括局部渲染、Server Actions 增强等。作为一名前端开发者，我最近在项目中升级到了 Next.js 14，今天就来分享一下从项目搭建到实际应用的完整过程。
项目初始化
首先，让我们创建一个全新的 Next.js 14 项目：
# 使用 create-next-app 创建项目
npx create-next-app@latest my-ne ...
Next.js项目中.prettierrc.json的配置
{
// 使用双引号包裹属性名
"quoteProps": "consistent",
// 对象的键值对之间使用一致的空格
"bracketSpacing": true,
// 行尾使用分号
"semi": true,
// 行尾使用单引号而不是双引号
"singleQuote": true,
// 在多行数组的最后一个元素后面加上逗号
"trailingComma": "all",
// 换行长度设置为100 ...
Next.js项目中.eslintrc.js的配置
print 'hello world!'module.exports = {
// 扩展配置，包含Next.js的核心Web Vitals插件和TypeScript支持插件等
extends: ['next/core-web-vitals', 'plugintypescript-eslint/recommended', 'plugin:import/recommended', 'prettier'],
rules: {
// 关闭jsx-a11y插件的alt-text规则，通常用于图像的alt属性检 ...
React服务端渲染框架Next.js入门教程
React服务端渲染框架Next.js入门教程
https://www.bilibili.com/video/BV13441117KK * 1
01节_Next.js简介和手动创建项目
02节_creat-next-app快速创建项目
03节_Next.js的Page和Conponent使用
04节_路由的标签跳转和编程跳转
05节_路由跳使用query传递参数和接受参数
06节_路由的6个钩子事件
//routeChangeStart
//routeC ...
【最新版】Next.JS极简教程
【最新版】Next.JS极简教程
https://www.bilibili.com/video/BV1do4y1K7BF 1 1
【最新版】Next.JS极简教程
02.项目结构_B站
03.定义路由_B站
04.页面与布局_B站
05.连接和导航_B站
06.路由组_B站
07.动态路由_B站
08.Loading UI and Streaming_B站
09.Error Handling_B站
10.Parallel Routes_B站
并行路由
目录@xx rootlay ...
