当前位置: 首页 > article >正文

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

下载项目

项目地址是: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.jspurge改成contentpages改成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.jsoncompilerOptions下增加pluginsinclude中增加.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/
在这里插入图片描述


http://www.kler.cn/a/587174.html

相关文章:

  • 我与DeepSeek读《大型网站技术架构》- 总结
  • 【零基础入门unity游戏开发——unity3D篇】物理系统 —— 3D物理材质Physics Material
  • 解锁下一代AI应用:开源项目mcp-server-qdrant如何重塑向量数据库管理?
  • EasyCVR安防视频汇聚平台助力工业园区构建“感、存、知、用”一体化智能监管体系
  • 异步加载错误如何解决
  • Linux 中 Git 使用指南:从零开始掌握版本控制
  • Flexus应用服务器L实例、X实例以及ECS(弹性计算服务)之间的区别及其适用场景
  • 函数的引用/函数的默认参数/函数的占位参数/函数重载
  • 【C++】:STL详解 —— 布隆过滤器
  • 设计心得——多态
  • 【VUE】day03-vue过滤器、计算属性、vue-cli、vue组件
  • java 中判断对象是否可以被回收和 GCROOT
  • DataWhale学习--大语言模型--模型发展历程
  • go 加载yaml配置文件
  • 成为Python砖家(7): 使用miniforge管理Python版本
  • STM32 HAL库实战:高效整合DMA与ADC开发指南
  • Unity学习日志番外:简易行为树
  • 金融时间序列分析(Yahoo Finance API实战)
  • Java构造方法详解:从入门到实战
  • 特殊 IP 地址