当前位置：首页 > news >正文

craftjs的示例landing项目改成APP路由

news 来源：原创 2025/8/15 18:27:09

下载项目

项目地址是：https://github.com/prevwong/craft.js

示例项目在examples文件夹下面landing文件夹

修改

1.修改依赖包

由于craftjs使用的多包管理，示例项目中@craftjs/core和@craftjs/layers使用的是工作区路径，这里需要修改版本

- "@craftjs/core": "workspace:*",
- "@craftjs/layers": "workspace:*",
+  "@craftjs/core": "0.2.12",
+  "@craftjs/layers": "0.2.7",

2.把`pages`文件夹重命名为`app`，改造`app`内文件

在app文件夹下新增GlobalStyleRegistry.tsx文件

"use client";import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
import React, { useState } from "react";export default function StyledComponentsRegistry({children,
}: {children: React.ReactNode;
}) {const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());useServerInsertedHTML(() => {const styles = styledComponentsStyleSheet.getStyleElement();styledComponentsStyleSheet.instance.clearTag();return <>{styles}</>;});if (typeof window !== "undefined") return <>{children}</>;return (<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>);
}

把index.tsx文件重命名为page.tsx

文件顶部增加"use client";，删除next-seo相关代码（next-seo不支持APP路由，使用generateMetadata，这个与"use client";冲突，所有放到layout.tsx中，详情看下面）
删除_document.tsx文件
把_app.tsx文件重命名为layout.tsx，并修改里面内容为

import React from "react";
import StyledComponentsRegistry from "./GlobalStyleRegistry";
import "../styles/app.css";
import type { Metadata } from "next";export const metadata: Metadata = {title: "Craft.js",description: "A React framework for building drag-n-drop page editors.",alternates: {canonical: "https://craft.js.org/",},twitter: {site: "craft.js.org",card: "summary_large_image",},
};
function RootLayout({ children }: { children: React.ReactNode }) {return (<html><body><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body></html>);
}
export default RootLayout;

3.安装`babel-plugin-styled-components`

npm i babel-plugin-styled-components -D

修改.babelrc，增加babel-plugin-styled-components配置

{"presets": ["next/babel"],"plugins": ["inline-react-svg",["styled-components",{ "ssr": true, "displayName": true, "preprocess": false }]]
}

修改next.config.js，删除experimental，增加compiler

module.exports = {output: 'export',compiler: {styledComponents: true, // 如果使用 SWC 也启用},assetPrefix:process.env.NODE_ENV === 'production' ? '/examples/landing' : '/',
};

4.改成`APP`路由后其他配置文件修改

修改tailwind.config.js，purge改成content，pages改成app

module.exports = {content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],theme: {extend: {colors: {primary: '#2680eb','dar-gray': '#4b4b4b','light-gray-0': '#eaeaea','light-gray-1': 'rgb(75,75,75)','light-gray-2': 'rgb(128,128,128)','renderer-gray': 'rgb(224, 224, 224)',red: '#e34850','green-400': '#2d9d78','green-500': '#268e6c',},},},variants: {},plugins: [],
};

修改tsconfig.json，compilerOptions下增加plugins，include中增加.next/types/**/*.ts

{"compilerOptions": {"target": "esnext","module": "esnext","jsx": "preserve","lib": ["dom", "es2017"],"baseUrl": ".","moduleResolution": "node","strict": true,"allowJs": true,"noEmit": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"skipLibCheck": true,"noUnusedLocals": false,"noUnusedParameters": true,"isolatedModules": true,"removeComments": false,"preserveConstEnums": true,"sourceMap": true,"forceConsistentCasingInFileNames": true,"resolveJsonModule": true,"noImplicitAny": false,"strictNullChecks": false,"incremental": true,"plugins": [{"name": "next"}]},"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],"exclude": ["node_modules"]
}

项目地址

https://gitee.com/lydxwj/craftjs-landing/tree/app-router/
在这里插入图片描述

craftjs的示例landing项目改成APP路由

下载项目项目地址是：https://github.com/prevwong/craft.js 示例项目在examples文件夹下面landing文件夹修改 1.修改依赖包由于craftjs使用的多包管理，示例项目中craftjs/core和craftjs/layers使用的是工作区路径，这里需要修改版本 …...

编程日记 2025/8/15 18:27:09

java -jar 执行基于Maven构建的Java应用的方法总结

一、Maven pom.xml文件未指定主类的情况 1、用Maven打包 mvn clean package -DskipTests 2、用java命令执行jar包 java -cp maven-allin-mainclass-demo-1.0-SNAPSHOT.jar org.example.Main 二、Maven pom.xml文件指定主类的情况 1、pom.xml文件指定主类，有两种…...

编程日记 2025/8/14 16:16:28

前端发布缓存导致白屏解决方案

解决发布H5后因为本地缓存白屏方案一、核心配置优化（前提是访问网站的请求能抵达服务器） 方案一：前端项目设置全局不缓存方案运行逻辑：在H5服务器配置中增加Cache-Control: no-cache或max-age0响应头，禁用静态资…...

编程日记 2025/8/14 12:11:34

【后端】【django】Django 自带的用户系统与 RBAC 机制

Django 自带的用户系统与 RBAC 机制 Django 自带的用户系统（django.contrib.auth）提供了身份验证（Authentication） 和权限管理（Authorization），能够快速实现用户管理、权限控制、管理员后台…...

编程日记 2025/8/14 15:58:07

SpringBoot MCP 入门使用

随着AI的火爆，最近发现MCP在未来确实大有可为，作为一名javaer怎么可以落后在历史洪流呢，根据官网和cursor也从零开始体验一下自定义mcp server。以后可以根据自己业务场景做出各种适合自身业务的工具。至于什么是MCP 可以到https://modelcon…...

编程日记 2025/8/10 18:07:38

Java使用JDBC连接操作Sqlite 笔记250314

Java使用JDBC连接操作Sqlite 以下是使用 Java JDBC 连接和操作 SQLite 数据库的详细步骤： 1. 添加 SQLite JDBC 驱动在项目中引入 SQLite JDBC 驱动依赖。 Maven 项目在 pom.xml 中添加：<dependency><groupId>org.xerial</groupId>…...

编程日记 2025/8/13 16:42:28

每日一题---腐烂的苹果（广度优先搜索）

腐烂的苹果给定一个 nm nm 的网格，其中每个单元格中可能有三种值中的一个 0 , 1 , 2。其中 0 表示这个格子为空、1 表示这个格子有一个完好的苹果，2 表示这个格子有一个腐烂的苹果。腐烂的苹果每分钟会向上下左右四个方向的苹果传播一次病菌&…...

编程日记 2025/8/15 10:43:08

Visual Studio里的调试（debugging）功能介绍

参考 1- Introduction to Debugging | Basic Visual Studio Debugging（这是一位印度博主视频，我下面做到笔记也主要参考她的视频，但不得不说口音太重了，一股咖喱味） 目录个人对调试浅显的认识和对调试的介绍逐行调…...

编程日记 2025/7/4 22:23:09

10.2linux内核定时器实验(详细编程)_csdn

我尽量讲的更详细，为了关注我的粉丝！！！ 本章使用通过设置一个定时器来实现周期性的闪烁 LED 灯，因此本章例程就使用到了一个LED 灯。这里我们以毫秒为单位，所以要用msecs_to_jiffies这个函数。如果是2s就…...

编程日记 2025/8/14 14:22:09

机器学习——正则化、欠拟合、过拟合、学习曲线

过拟合（overfitting）:模型只能拟合训练数据的状态。即过度训练。避免过拟合的几种方法： ①增加全部训练数据的数量（最为有效的方式） ②使用简单的模型（简单的模型学不够，复杂的模型学的太多&am…...

编程日记 2025/8/13 14:39:37

Java多线程与高并发专题——阻塞和非阻塞队列的并发安全原理是什么？

引入之前我们探究了常见的阻塞队列的特点，在本文我们就以 ArrayBlockingQueue 为例，首先分析 BlockingQueue ，也就是阻塞队列的线程安全原理，然后再看看它的兄弟——非阻塞队列的并发安全原理。 ArrayBlockingQueue 源码分析 …...

编程日记 2025/8/15 9:11:49

git 撤销某次提交的上交到远程服务器的commit提交，此提交后面的commit需要保留【deeepseek生成】

核心思路使用 git rebase -i 重写提交历史，删除目标提交后强制推送到远程（需谨慎操作）。操作步骤 1. 确认要删除的提交位置 # 查看提交历史（找到要删除的提交哈希，例如 a1b2c3d） git log --oneline查看提…...

编程日记 2025/8/11 0:08:42

docker composeyaml文件，什么是swap-space，内存不足硬盘来凑，--ipc=host，yaml文件、环境变量、容器报警健康检查

--swap-space 参数明确针对的是系统内存（RAM），与显存（GPU Memory）无关。以下是关键区分： 内存（RAM） vs 显存（GPU Memory） 类型内存（RAM&#xff…...

编程日记 2025/8/7 13:06:50

tsfresh：时间序列特征自动提取与应用

tsfresh：时间序列特征自动提取与应用本文系统介绍了 tsfresh 技术在 A 股市场数据分析与量化投资中的应用。从基础特征提取到高级策略开发，结合实战案例，详细讲解了如何利用 tsfresh 构建量化投资策略，并优化风险控制&#xff0c…...

编程日记 2025/8/11 22:52:35

【A2DP】深入解读A2DP中通用访问配置文件（GAP）的互操作性要求

目录一、模式支持要求 1.1 发现模式 1.2 连接模式 1.3 绑定模式 1.4 模式间依赖关系总结 1.5 注意事项 1.6 协议设计深层逻辑二、安全机制（Security Aspects） 三、空闲模式操作（Idle Mode Procedures） 3.1 支持要求 …...

编程日记 2025/8/13 5:51:59

CUDA编程之内存

CUDA的内存类型有全局内存、共享内存、常量内存、纹理内存、本地内存、寄存器等。我们需要分别了解它们的特点和使用场景。在CUDA编程中，合理利用各种内存类型对性能优化至关重要。 1. ‌全局内存（Global Memory）‌ ‌特点‌：设…...

编程日记 2025/8/14 20:29:21

【Agent实战】货物上架位置推荐助手（RAG方式+结构化prompt（CoT）+API工具结合ChatGPT4o能力Agent项目实践）

本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录结论效果图示 1.prompt 2. API工具封…...

编程日记 2025/8/10 10:44:24

ffmpeg面试题整理

1. 基础概念问题：FFmpeg 是什么？它的核心功能有哪些？ 编解码：支持几乎所有音视频格式（如 H.264, AAC, MP3）。转换：在不同容器格式之间转换（如 MP4 → MKV）。流处理&…...

编程日记 2025/8/13 18:45:16

Idea运行项目报错:java.lang.OutOfMemoryError: Java heap space 解决方法

问题描述 Maven构建的时候，一直报错java.lang.OutOfMemoryError: Java heap space 尝试解决找了几个JAVA高级小伙伴，一起去百度了各种可能，设置内存大小，发现都不行，还不断的重装了IDEA，以为是这个版本…...

编程日记 2025/8/15 1:55:37

解决 Linux /dev/mapper/ubuntu--vg-ubuntu--lv 磁盘空间不足的问题

解决 Linux /dev/mapper/ubuntu–vg-ubuntu–lv 磁盘空间不足的问题 https://blog.csdn.net/weixin_47908992/article/details/139882219 查看LVM卷组的信息 vgdisplay rootubuntu:~# vgdisplay--- Volume group ---VG Name ubuntu-vgSystem ID Fo…...

编程日记 2025/8/14 8:05:09

前端UI编程基础知识：基础三要素（结构→表现→行为）

以下是重新梳理的前端UI编程基础知识体系，结合最新技术趋势与实战要点，以更适合快速掌握的逻辑结构呈现： 一、基础三要素（结构→表现→行为） 1. HTML5 核心能力 • 语义化标签：<header>, <nav&g…...

编程日记 2025/8/15 7:25:01

Trae：与AI结伴，开启编程新体验

Trae：与AI结伴，开启编程新体验在数字化时代，编程已经成为推动技术发展的核心力量。然而，随着项目复杂度的增加，开发者面临着诸多挑战，例如代码编写效率低下、代码质量难以把控等。如今，Trae作…...

编程日记 2025/8/15 1:29:23

如何用正则表达式爬取古诗文网中的数据（python爬虫）

一、了解正则表达式的基本内容： 什么是正则表达式正则表达式（Regular Expression，简称 regex）是一种用于匹配字符串的模式。它通过特定的语法规则，可以高效地搜索、替换和提取文本中的特定内容。正则表达式广泛应用于…...

编程日记 2025/8/14 22:52:06

深度学习 Deep Learning 第1章深度学习简介

第1章深度学习简介概述本章介绍人工智能（AI）和深度学习领域，讨论其历史发展、关键概念和应用。解释深度学习如何从早期的AI和机器学习方法演变而来，以及如何有效解决之前方法无法应对的挑战。关键概念 1. 人工智能的演变 …...

编程日记 2025/8/10 20:25:10

ByteByteGo学习笔记：通知系统设计

引言在当今这个信息爆炸的时代，通知系统已经成为了现代应用程序中不可或缺的重要组成部分。无论是突发新闻的即时推送、产品更新的及时告知、促销活动的精准触达，还是用户交互的实时反馈，通知都扮演着至关重要的角色。一个高效、可靠、可扩…...

编程日记 2025/8/10 18:43:41

[设计模式]1_设计模式概览

摘要：设计模式原则、设计模式的划分与简要概括，怎么使用重构获得设计模式并改善代码的坏味道。本篇作概览与检索用，后续结合源码进行具体模式深入学习。目录 1、设计模式原理核心原则（语言无关） 本质原理图原…...

编程日记 2025/8/9 4:58:33

Python + Qt Designer构建多界面GUI应用程序：Python如何调用多个界面文件

引言 Qt Designer是一个用户友好的图形用户界面设计工具，它可以帮助开发人员通过拖放的方式快速创建界面。在实际开发中，往往需要设计多个界面文件，并在Python代码中进行统一管理和使用。本文将介绍如何在Python中使用Qt Designer设计好的多…...

编程日记 2025/8/11 0:51:30

AGI大模型（7）：提示词应用

1 生成数据 LLM具有⽣成连贯⽂本的强⼤能⼒。使⽤有效的提示策略可以引导模型产⽣更好、更⼀致和更真实的响应。LLMs还可以特别有⽤地⽣成数据，这对于运⾏各种实验和评估⾮常有⽤。例如，我们可以使⽤它来为情感分类器⽣成快速样本，如下所示：提示：⽣成10个情感分析的范…...

编程日记 2025/8/12 5:23:32

【倒霉bug2025】找不到vc_runtimeMinimum_x64.msi

今天是倒霉的一天，当喉咙痛到无法出门玩耍的我打开steam准备开始玩《冰封世界》时，游戏启动直接报错在选择安装之后弹出一个经典窗口然后在C:\ProgramData\PackageCache中找msi到位置点击确定继续报错说msi版本不对上网一搜，找不到vc_ru…...

编程日记 2025/8/11 14:42:34

什么是强哈希算法pbkdf2(Password-Based Key Derivation Function)

文章目录什么是pbkdf2使用场景在线工具什么是pbkdf2 维基百科：https://zh.wikipedia.org/zh-cn/PBKDF2 PBKDF2（Password-Based Key Derivation Function 2）是一种基于密码的密钥派生函数。它的主要作用是从密码和盐（salt&…...

编程日记 2025/8/15 4:54:33

Python 基础语法详解

一、变量和数据类型变量在 Python 中，变量无需声明类型，直接赋值即可。变量名区分大小写。 # 整数类型 age 25 print(age) # 输出：25# 浮点数类型 height 1.75 print(height) # 输出：1.75# 字符串类型 name "张三&…...

编程日记 2025/8/12 5:49:11

AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴

【本周AI新闻: AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴】 https://www.bilibili.com/video/BV1bkQyYCEvQ/?share_sourcecopy_web&vd_source32ed33e1165d68429b2e2eb4749f3f26 最近AI圈子里最火的话题非Manus莫属！这款由中国武汉创业公司“蝴…...

编程日记 2025/8/11 21:20:03

为什么会出现redis数据库？redis是什么？

什么是 Redis? 为什么要用 Redis? 下面我将从 Redis 出现的背景、Redis 的解决方案个来回答。 1、Redis 出现的背景互联网的应用越来越多，例如社交网络、电商、实时服务发展的十分迅速，这就导致了传统技术栈（如关系型数据库）…...

编程日记 2025/8/11 15:42:24

每日一题---dd爱框框（Java中输入数据过多）

dd爱框框实例： 输入： 10 20 1 1 6 10 9 3 3 5 3 7 输出： 3 5 这道题要解决Java中输入的数过多时，时间不足的的问题。应用这个输入模板即可解决： Java中输入大量数据 import java.util.*; import java.io.*;pu…...

编程日记 2025/8/12 19:27:52

Flink-学习路线

最近想学习一下Flink，公司的实时需求还是不少的，因此结合ai整理了一份学习路线，记录一下。当然，公司也有Scala版本Flink框架，也学习了一下。这里只说Java版本 1. Java基础目标: 掌握Java编程语言的基础知识。内容…...

编程日记 2025/8/11 13:25:28

一次Milvus迁移的记录

前言希望把Linux上生产环境中使用docker compose运行的milvus迁移到本地(mac os)的docker compose中操作过程找到了官方有两个相关的项目： https://github.com/zilliztech/milvus-backup https://github.com/zilliztech/vts 但是…我都没用，因为使…...

编程日记 2025/8/13 1:30:17

矩阵的转置

对于的矩阵，使用两个指针变量，可以方便实现(i,j)处元素与(j,i)处元素交换位置。令指针Arow&A[i][0]，则Arow[j]可实现对第i行j列元素的访问。令指针Bptr&A[0][i]，则*Bptr就可以访问(0,i)处元素，然后&#xff0c…...

编程日记 2025/8/12 11:09:01

使用 VLOOKUP 和条件格式在 Excel 中查找并标红匹配的串号

使用 VLOOKUP 和条件格式在 Excel 中查找并标红匹配的串号你的步骤非常详细且清晰，能够帮助用户在 Excel 中通过 VLOOKUP 和条件格式来查找并标红匹配的串号。以下是对你提供的步骤的简要总结和补充说明： 1. 添加“是否匹配”列在 a.xlsx 中新增一列…...

编程日记 2025/8/9 8:56:28

Python Matplotlib面试题精选及参考答案

目录绘制函数 y=2x+5 在区间 [1,10] 的折线图，设置标题和坐标轴标签在同一图中绘制 sin (x) 和 cos (x) 曲线，添加图例和网格线（x∈[0,2π]）绘制分段函数：当 x<0 时 y=0，x≥0 时 y=x，设置不同线段颜色绘制带数据点的折线图，使用红色虚线样式和圆形标记（数据…...

编程日记 2025/8/14 16:53:17

在线 SQL 转 SQLAlchemy：一键生成 Python 数据模型

一款高效的在线 SQL 转 SQLAlchemy 工具，支持自动解析 SQL 语句并生成 Python SQLAlchemy 模型代码，适用于数据库管理、后端开发和 ORM 结构映射。无需手写 SQLAlchemy 模型，一键转换 SQL 结构，提升开发效率，简化数据库…...

编程日记 2025/7/15 16:59:20

基于自定义线程池手写一个异步任务管理器

我们在后端执行某些耗时逻辑操作时往往会导致长时间的线程阻塞，在这种情况之下，我们往往会引一条异步线程去处理这些异步任务，如果每次都创建新的线程来处理这些任务，不仅会增加代码冗余，还可能造成线程管理混乱&#…...

编程日记 2025/8/10 22:49:25

基恩士PLC编程小技巧八：脚本过长如何实现换行及替换

基恩士PLC编程小技巧八：脚本过长如何实现换行？ 一、问题点我们在使用基恩士编程软件KV STUDIO 进行脚本编程时，经常遇到这样的问题：脚本的一行过长，程序不好阅读及维护。 IF MR1000 OR MR1001 OR MR1002 OR MR1003 OR…...

编程日记 2025/8/13 22:35:26

每日一题---数组中两个字符串的最小距离

数组中两个字符串的最小距离给定一个字符串数组strs，再给定两个字符串str1和str2，返回在strs中str1和str2的最小距离，如果str1或str2为null，或不在strs中，返回-1。链接：数组中两个字符串的最小距离__牛…...

编程日记 2025/8/10 17:21:38

【PTA题目解答】7-1利用STL比较数据大小并排序（15分）c++

1.题目： 2.算法原理根据题目要求，模拟即可，set容器会帮我们把插入的数自动排序好题目说输入非整型数据就停止，不用特意判断输入的数据是整型还是非整型，如果用户输入的是字符（例如 a）&#…...

编程日记 2025/8/12 16:47:24

如何用Deepseek制作流程图？

使用Deepseek制作流程图，本质上是让AI根据你的需求，生成相关流程图的代码，然后在流程图编辑器中渲染，类似于Python一样，ChatGPT可以生成代码，但仍需在IDE中执行。你知道绘制流程图最高效的工具是什么吗&a…...

编程日记 2025/8/11 19:33:49

【09】单片机编程核心技巧：变量赋值，从定义到存储的底层逻辑

【09】单片机编程核心技巧：变量赋值，从定义到存储的底层逻辑 🌟 核心概念单片机变量的定义与赋值是程序设计的基础，其本质是通过 RAM（随机存储器） 和 ROM（只读存储器） 的协作实现…...

编程日记 2025/8/15 13:21:31

vscode python相对路径的问题

vscode python相对路径的问题最近使用使用vscode连接wsl2写python时，经常遇到找不到包中的方法的问题，最终发现vscode在执行python代码时目录不是从当前python文件开始算起，而是从当前工作区的目录开始算起，比如说我打开的是/ho…...

编程日记 2025/8/9 1:22:37

C语言中的指针与函数

引言在C语言编程中，指针是一个非常重要且强大的概念。它不仅帮助我们高效地管理内存，还能提升程序的灵活性和性能。而指针与函数的结合使用，是C语言中非常常见且极具挑战性的一个话题。正确理解和使用指针与函数的关系，不仅能帮助程序员提高代码质量，还能优化程序的执行…...

编程日记 2025/8/10 23:03:10

深度学习-服务器训练SparseDrive过程记录

1、cuda安装 1.1 卸载安装失败的cuda 参考：https://blog.csdn.net/weixin_40826634/article/details/127493809 注意：因为/usr/local/cuda-xx.x/bin/下没有卸载脚本，很可能是apt安装的，所以通过执行下面的命令删除： a…...

编程日记 2025/8/9 11:29:40

理解langchain langgraph 官方文档示例代码中的MemorySaver

以下是langchain v0.3官方示例代码 from langgraph.checkpoint.memory import MemorySaver from langgraph.graph import START, MessagesState, StateGraph# 可以理解为：定义一个流程，这个流程中用到的数据类型是Messages。 <---定义一个有向图&…...

编程日记 2025/8/12 1:52:52

下载项目

修改

1.修改依赖包

2.把pages文件夹重命名为app，改造app内文件

3.安装babel-plugin-styled-components

4.改成APP路由后其他配置文件修改

项目地址

相关文章：

2.把`pages`文件夹重命名为`app`，改造`app`内文件

3.安装`babel-plugin-styled-components`

4.改成`APP`路由后其他配置文件修改