next.js react

# 初始化next.js项目
npx create-next-app@latest <name>

<name>.module.css        css文件名字

文件结构

/app/ui                                               # 存放ui文件

/app/ui/fonts.ts                                  # 存放字体文件

/app/layout.tsx                                   # 127.0.0.1:3000/

/app/page.tsx                                     # 127.0.0.1:3000/

/app/dashboard/customers                # 127.0.0.1:3000/dashboard/customers

/public                                                # 存放图片文件

添加图片

import Image from 'next/image';

<Image
  src="/hero-mobile.png"            # /public/hero-mobile.png
  alt="Screenshots of the dashboard project showing desktop version"
  width={560}
  height={620}
  className="block md:hidden"
/>

槽函数

function Component(props) {
    return { props.children };
}

<Component>
    <p> slot </p>
</Component>

Hook

使用useState时必须在文件开头注明"use client";

useState

const [layout, setLayout] = useState(null);
setLayout(new_layout);

更新state后会导致组件更新，组件相关函数再运行一遍，但是state不会初始化。

setLayout()运行后，layout为新的引用才会引发重新渲染。

useRef

记录不影响组件渲染的变量。useRef变化不会引起组件重新渲染。

const layoutRef = useRef(layout);
layoutRef.current = new_layout;
const layout = layoutRef.current;

useDrag

useDrop

zustand

# 定义zustand的state
export const useClass1 = create((set) => ({
  data: [],
  assign: (ndata) => set({ data: ndata }),
}));

# 访问state, 组件外
useClass1.getState().assign(jmsg.data);
useClass1.setState({ data: ndata });

# 不会订阅状态
const { data, assign } = useClass1();

# 会订阅状态, 组件内
const data = useClass1((state) => state.data);

静态打包

// in next.config.mjs
const nextConfig = {output: 'export',};

npm run build

常见报错

GET /favicon.ico 500
将*/public/favicon.ico复制到*/app/icon.ico