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

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

article 2025/3/16 16:31:58

下载项目

项目地址是：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"]
}