nextjs

Nextjs 是一个基于 react.js 的通用应用框架。

常见用法

1. nextjs 服务端组件，Page 页面如何获取到浏览器路径和请求参数？

• 可以[...page]动态获取

2. api: 获取链接参数

import { useSearchParams } from "next/navigation";

const searchParams = useSearchParams();
const ref_page = searchParams.get("ref_page");

3. 环境变量

const VITE_HOST = process.env.NEXT_PUBLIC_VITE_HOST;

4. nextjs 动态加载 react-beautiful-dnd

import dynamic from "next/dynamic";

const DragDropContext = dynamic(
  () => import("react-beautiful-dnd").then((module) => module.DragDropContext),
  { ssr: false }
);
const Droppable = dynamic(
  () => import("react-beautiful-dnd").then((module) => module.Droppable),
  { ssr: false }
);
const Draggable = dynamic(
  () => import("react-beautiful-dnd").then((module) => module.Draggable),
  { ssr: false }
);

优化建议

1. 推荐 App 路由；路由 app 将优先于 pages。我们建议在您的新项目中仅使用一台路由器以避免混淆。
2. 并行路由插槽 @folder 测试无效（估计被移除了），禁止使用。

参考链接

https://nextjs.org/