除了一个特定组件之外，下一个/字体在任何地方都适用

下一个/字体

将 Next.js 与 TypeScript 和 Tailwind CSS 结合使用

这是我第一次使用新next/font软件包。我遵循了 Next.js 的教程，它很容易设置。我正在使用 Inter 和名为 App Takeoff 的自定义本地字体。为了实际使用这两种字体，我使用 Tailwind CSS，其中 Inter 连接到font-sans，App Takeoff 连接到font-display。

除一处外一切正常

我已经在文件之间进行了大量的测试，并且出于某种原因，除了我的Modal组件之外，两种字体都可以在任何地方使用。（请参阅底部的“有用更新”以了解它在组件中不起作用的原因Modal。）

例子

索引.tsx

modal.tsx 通过 index.tsx

正如您所看到的，当字体不在模式中时，它们工作得很好，但是一旦它们在模式中，它们就不起作用。

这是一些相关代码：

// app.tsx\n\nimport \'@/styles/globals.css\'\nimport type { AppProps } from \'next/app\'\n\nimport { Inter } from \'next/font/google\'\nconst inter = Inter({\n  subsets: [\'latin\'],\n  variable: \'--font-inter\'\n})\n\nimport localFont from \'next/font/local\'\nconst …

Run Code Online (Sandbox Code Playgroud)

javascript css fonts next.js tailwind-css

and*_*lla

2023 03-02

9
推荐指数

2
解决办法

2732
查看次数

如何在 Next.js 13 应用程序路由器中添加架构

太长了；博士

Next.js 13 的/app路由器layout和page路由改变了我们向<head>. 如何向每个页面添加架构脚本？Next.js 会自动将<head>放置在任何layout或page中的标签编译为单个<head>.

目标

就像任何具有出色 SEO 的网站一样，我想在每个页面的头部包含一个架构脚本。

历史

通常，这就像这样简单地编写<head>：

<!-- index.html -->
<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      // ... the rest
    }
  </script>
</head>

Run Code Online (Sandbox Code Playgroud)

然后，Next.js/pages目录有点不同。我总是觉得必须使用该dangerouslySetInnerHTML属性很奇怪，但至少它有效。

// index.tsx
import Head from 'next/head'
export default function Page() {
  return (
    <Head>
      <script id="schema" type="application/ld+json" dangerouslySetInnerHTML={{__html: `
        {
          "@context": "https://schema.org",
          // ... the rest
        }
      `}} /> …

Run Code Online (Sandbox Code Playgroud)

javascript schema app-router next.js next.js13

and*_*lla

2023 07-21

3
推荐指数

1
解决办法

3377
查看次数