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.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/