nextjs专题
NextJs-react开发者的全栈最佳选择(从0-1的react全栈入门指南)
NextJs:react开发者的全栈最佳选择(从0-1的react全栈入门指南) 目录 前言学习路线 1.TS速成2.React速成视频入门（四个板块）3.React官方文档4.学习React常用hooks5.学习tailwindcss6.做一个小项目：One Thing7.学习NextJS148.学习MongoDB9.学习AuthJS/Next-Auth10.巩固NextJS11.NextJ
nextjs+supabase判断是否登录核心代码
import { NextRequest, NextResponse } from "next/server";import { createClient } from '@/utils/supabase/server';export async function middleware(request: NextRequest) {const { pathname } = request.nex
【nextjs strapi】如何统一封装 fetch 请求
前端 nextjs 接入 strapi 作为后端 如何封装请求呢 我们使用的是浏览器的 fetch 不用安装任何库 封装 frontend/src/app/[lang]/utils/fetch-api.tsx import qs from "qs";import { getStrapiURL } from "./api-helpers";export async function
WHAT - NextJS 系列之 Rendering - Server Rendering Strategies
目录 1. Static Rendering（静态渲染）特点：实现方式： 2. Dynamic Rendering（动态渲染）特点：实现方式： 3. Streaming Rendering（流式渲染）特点：实现方式： 总结 相关官方文档：https://nextjs.org/docs/app/building-your-application/rendering/server-co
WHAT - NextJS 系列之六大特性
目录 一、介绍二、特性RoutingRenderingData FetchingStylingOptimizationsTypeScript 官方文档：https://nextjs.org/docs 一、介绍 Next.js is a React framework for building full-stack web applications. You use React
WHAT - NextJS 系列之 Rendering - Server Components
目录 一、Server Components1.1 Server Components特点使用 1.2 Client Components特点使用 1.3 综合使用示例1.4 小结 二、Server Components 优势三、Streaming 特性3.1 基本介绍和使用Streaming的理解工作原理使用示例服务器端组件客户端组件页面流程解释 3.2 HTTP/1.1和HTTP/2中
使用Nextjs学习(学习+项目完整版本)
创建项目 运行如下命令 npx create-next-app next-create 创建项目中出现的各种提示直接走默认的就行,一直回车就行了 创建完成后进入到项目运行localhost:3000访问页面,如果和我下面页面一样就是创建项目成功了 整理项目 将app/globals.css里面的样式都删除,只留下最上面三行即可将app/layout.js的类名添加一个补充,换成 cl
NextJs 实现自定义点火操作
NextJs 实现自定义点火操作 前言实现自定义点火 前言 我希望在Nextjs 启动的时候，能够自定义实现一些项目的初始化逻辑，也可以说是一些点火操作，比如资源的加载，数据的初始化等操作。 实现自定义点火 我们可以在根目录下创建一个文件server.js // server.jsconst { createServer } = require('http')const
Nextjs使用教程
一.手动创建项目 建议看这个中文网站文档,这个里面的案例配置都是手动的,也可以往下看我这个博客一步步操作 1.在目录下执行下面命令,初始化package.json文件 npm init -y 2.安装react相关包以及next包 yarn add next react react-dom// 或者npm install --save next react react-dom 3
nextjs 14 实现i18n 国际化
对于 Next.js 14，可以使用 next-i18next 库来实现国际化（i18n）。这个库可以帮助你在 Next.js 应用程序中轻松地管理多语言内容。你可以按照以下步骤来实现 i18n： 首先，安装 next-i18next 库： npm install next-i18next 在 Next.js 项目中创建一个 i18n.js 文件，并配置语言设置。例如： // i18n.js
nextjs router.asPath router.pathname 介绍
在 Next.js 中，router 对象提供了很多有用的方法和属性，帮助你控制页面导航和获取当前路由信息。其中，router.asPath 和 router.pathname 是两个常用的属性，它们各自提供了关于当前 URL 的不同信息。 router.asPath router.asPath返回当前页面的完整 URL 路径，包括查询参数。这个属性对于需要显示当前完整 URL 的情况非常有用，
NextJs教程系列(五)：动态路由
如果您事先不知道确切的区段名称，并且想要从动态数据创建路由，则可以使用在请求时填充或在构建时预呈现的动态区段。 app/blog/[slug]/page.js export default function Page({ params }) {return <div>My Post: {params.slug}</div>} 例如： RouteExample URLparamsapp/
nextjs上的DDD架构
背景 新入职公司，需要快速把之前杂乱无章的首页（有复杂业务，nextjs）搭一个靠谱的架构，否则基本没办法把事情继续推进了（核心流程需要持续大量适配到不同的后端实现上）。 个人客户端出身，之前落地DDD都是在正经强类型、静态类型语言上，而nextjs（ts）上语言习俗与DDD模式格格不入，遂制定了一些ts友好的规则来落地DDD。 DDD与ts DDD的核心组成是充血对象（entity）+im
NextJs教程系列(二)：路由
介绍 NextJs的路由系统是NextJs的核心之一，先上一张图来感受下NextJs的路由系统。 路由规则，约定大于配置 NextJs的路由系统是一个树形结构，最顶层是app目录，然后是路由文件，最后是具体的页面。 通过一张url和路由文件的映射关系图来直观的感受下： NextJs的路由系统遵循了约定大于配置的元素，每个路由文件下可以包含如下的文件： page.js: 必填 文件
nextjs use client 和use server区别
在Next.js中，use client和use server是用于在服务器端和客户端渲染时分别执行特定逻辑的自定义钩子。虽然具体的实现方式可能会因项目而异，但一般来说，这两个钩子有如下的区别： 执行环境：use server主要用于服务器端渲染，它允许你在服务器端执行某些逻辑，比如数据获取、状态管理等。而use client则主要用于客户端渲染，允许你在客户端执行一些特定的逻辑，比如UI更新、
NextJS开发：使用swiper实现轮播图
安装swiper npm i swiper 创建组件 一定要添加"use client"，作为客户端组件来使用示例代码中的样式使用的tailwindcss "use client"import { Swiper, SwiperSlide } from "swiper/react"import { Pagination } from 'swiper/modules';// Import
【化蛹为蝶三】Nextjs 项目目录结构
上篇 我们唠了唠 Nextjs 项目如何使用 TypeScript、如何引入 Antd 还做了些预告，虽然咳咳…直接断更了 12 天 不过中间是去 la 了个双眼皮儿，休养带恢复了好些天，今儿就麻溜儿回来了 誓不烂尾 嗯~ o(￣▽￣)o – 今儿也不多更，保持每篇能聚焦一两个点就可 今天讲述下我从零到现在搭起来的 Nextjs 个人项目调整了三次的项目目录结构
手把手教学 nextjs中环境变量的详细处理
官网只有dev和prod的环境变量判断，再次增加test环境变量和开发环境中调用线上接口的方法，然后再服务端和客户端都可以获取到环境变量了。 1.创建.env文件 首先在根目录下创建3个.env文件 // .env.developmentAPP_ENV=development// .env.testAPP_ENV=test// .env.productionAPP_ENV=produc
nextjs + sharp在 vercel 环境svg转png出现中文乱码
在之前一篇博客 Next.js和sharp实现占位图片生成工具，详细介绍了使用 Next.js + sharp + Vercel 来实现一个 占位图片生成工具，遇到一个奇怪的问题：在本地开发环境，英文、数字、中文字符自定义内容，都能正常渲染。但是发布到 Vercel 生产环境，自定义内容除了英文字符和数字外，中文字符 显示为 Unicode 码位(乱码)，如下图所示。 问题原因 经过排查，
Error error Expected ‘,‘, got ‘className‘ in nextjs
Error: error: Expected ‘,’, got ‘className’ in nextjs 原因： ReactJS doesn’t allow 2 parent elements, make sure to use a div as parent element return (<div><Head>...</Head> <form> ...</form> </div>)
NextJS开发：封装shadcn/ui中的AlertDialog确认对话框
shadcn/ui很灵活可以方便的自己修改class样式，但是仅仅一个确认删除弹窗，需要拷贝太多代码和导入太多包，重复的代码量太多，不利于代码维护。所以进一步封装以符合项目中使用。 封装cx-alert-dialog.tsx import {AlertDialog,AlertDialogAction,AlertDialogCancel,AlertDialogContent,AlertDialo
NextJS开发：nextjs中使用CkEditor5
NextJS项目中需要使用CkEditor5作为富文本编辑器，按照官网React CkEditor5手册使用出现如下错误： node_modules/@ckeditor/ckeditor5-react/dist/index.js (5:242) @ eval⨯ ReferenceError: self is not defined 还是因为nextjs的服务器端渲染造成的错误，富文本编辑器一
NextJS开发：nextjs中使用CkEditor5
NextJS项目中需要使用CkEditor5作为富文本编辑器，按照官网React CkEditor5手册使用出现如下错误： node_modules/@ckeditor/ckeditor5-react/dist/index.js (5:242) @ eval⨯ ReferenceError: self is not defined 还是因为nextjs的服务器端渲染造成的错误，富文本编辑器一
nextjs项目修改启动端口号，以及开发启动后自动打开浏览器
next版本：13.5.4 一、修改端口 在package.json文件当中修改启动命令 "scripts": {"dev": "next dev -p 3100","build": "next build","start": "next start","lint": "next lint"}, 这样以来就会以端口3100进行启动。 二、开发启动自动开发浏览器 还是在package.j