路由定义.md

根目录 root/app文件夹下定义我们的page页面

尽可能以 contact-us/page.tsx 这个路由规范进行定义page组件。

注意：

page.tsx 使用的时候尽可能考虑以服务端组件渲染为主，page.tsx 是SEO优化项获取数据的入口。服务器获取 url 上的 param 和 searchParams 信息时，可以直接在props中获取。

如需要开发 api 相关业务，建议在 app/api/route.ts 定义使用

Page页面组件开发定义

禁止使用箭头函数定义 page 组件，因为在某些场景下服务端的props会丢失，不利于做SEO工作开展。页面开展工作时尽可能以组件思维开发。

import { CustomImage } from '@/components/CustomImage';
import PageProps from '@/types/PageProps';

export default function Home({ params, searchParams }: PageProps) {
  console.log(params, searchParams);
  return (
    <div>
      <CustomImage src={'/2.png'} alt={'2.png'} />
    </div>
  );
}

组件开发

一般的组件我们都会放在 components 文件夹下。建议使用 components/ContactUs/index.ts 的方式进行编码

推荐使用这种项目结构进行组件开发，方便以后的重构与迁移。

.
├── ContactUs.tsx
└── index.ts

export { default as ContactUs } from './ContactUs';

开发组件是，建议添加 "use client" 标识，除非这个组件没有客户端逻辑，但一般前端的组件不可能没有不使用客户端api。

客户端 api 统指 useEffect，useMome，useCallback等与浏览器api。可去mdn中查阅 web api相关api。

"use client"
function ContactUs() {
  return (
    <div>
      <h1>Contact Us</h1>
    </div>
  );
}

export default ContactUs;