Skip to main content

Next.js 相关

react-markdown 渲染 mermaid

  1. 用 yarn 或者 pnpm 安装 mermaid 这个库。

  2. 在 Next.js 项目的入口文件(通常是 pages/_app.js)中初始化 Mermaid。

import { useEffect } from 'react';
import mermaid from 'mermaid';

function MyApp({ Component, pageProps }) {
useEffect(() => {
mermaid.initialize({
theme: 'default',
startOnLoad: false,
});
}, []);
}
  1. 在页面文件中渲染 Mermaid。
mermaid.init(undefined, '.language-mermaid');

结合 tailwindcss 实现深色/浅色模式的切换

参考资料:TailwindCSS Dark Mode in Next.js with Tailwind Typography Prose Classes

关键代码:

// tailwind.config.js
export const darkMode = "class";
// _app.tsx
import { ThemeProvider } from "next-themes";

...
<ThemeProvider attribute="class">
<main>
...
</main>
</ThemeProvider>
...
// 实现切换颜色模式的文件
import { useTheme } from "next-themes";

export const ToggleDarkModeButton = () => {
const { theme, setTheme } = useTheme();

return (
<div onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
</div>
)

然后在其他地方正常地用 dark: 设置深色模式的样式即可。

离开页面前执行特定操作

关键词:nextjc on route change

参考资料:Next.js Router - Listen to route (location) change with useRouter

关键代码:

import { useRouter } from "next/router";
const router = useRouter();

useEffect(() => {
const onLeave = () => {};
router.events.on("routeChangeStart", onLeave);

return () => {
router.events.off("routeChangeStart", onLeave);
};
}, []);

使用 Google 字体的另一种方案

使用 Google 可变字体并指定字号

关键词:nextjs import variable font set font weight

关键代码:

先定义并导出要用到的各个字体:

// styles/fonts.ts
import { Inter, Lora, Source_Sans_Pro } from "next/font/google";
import localFont from "next/font/local";

// define your variable fonts
const inter = Inter();
const lora = Lora();
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_Pro({ weight: "400" });
const sourceCodePro700 = Source_Sans_Pro({ weight: "700" });
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
const greatVibes = localFont({ src: "./GreatVibes-Regular.ttf" });

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes };

然后在需要用到指定字体的地方导入并使用:

import { sourceCodePro700 } from "../styles/fonts";

export default function Page() {
return (
<div>
<p className={sourceCodePro700.className}>
Hello world using Source_Sans_Pro font with weight 700
</p>
</div>
);
}