小编Wil*_*ker的帖子

更新：

1. 由于 [category_slug]-index.js 导致此错误getServerSideProps？
2. 我尝试index.js在产品文件夹下执行此操作，它有效，这意味着它可以与 [category_slug] 配合使用getServerSideprops，对吗？

这是我的文件夹结构

pages
   |-categories
       |-[category_slug]
           |-index.js     
           |-product
               |-[product_slug].js       

当我输入时，它会导致错误[product_slug]。显示：

错误：未在 /categories/[category_slug]/product/[product_slug] 的 getStaticPaths 中以字符串形式提供所需参数 (category_slug)

这可以在 Next.js 中执行嵌套路由文件夹吗？我找不到这方面的任何信息。我在下面展示我的代码。

pages
   |-categories
       |-[category_slug]
           |-index.js     
           |-product
               |-[product_slug].js       

我尝试向 提供硬编码值[category_slug]。这样的话就正确了吗？我也不确定。我在文档中找不到此内容。

// [product_slug].js

export async function getStaticProps({ params: { product_slug } }) {
  const product_res = await fetch(
    `${API_URL}/products/?product_slug=${product_slug}`
  ); // question mark is query slug, to find the slug in the json
  const found = await product_res.json();

  return …

Vue v3文档展示了一个通过将数组作为参数传递来使用单个观察者观察多个引用的示例

我可以（以及如何）使用类似的方法通过单个观察者同时观察ref和对象？reactive

const state = reactive({
  postPerPage: 10,
  currentPage: 1,
});

const posts = ref([]);

const currentPosts = ref([]);

watch(
  () => posts.value, // store value in currentPosts when the posts.value is updated (get data from api)
  () => {
    currentPosts.value = getCurrentPost(); 
  }
)

watch(
 () => {
  return { ...state };
 }
 () => {
  currentPosts.value = getCurrentPost();
 }
)

它可以很好地将组件渲染到网站，但打字稿显示导入mdx文件错误。

打字稿错误消息：找不到模块“@/articles/good.mdx”或其相应的类型声明。

我在堆栈溢出中发现了大量评论。但仍然没有解决这个问题。尝试安装@mdx-js/mdx，同样不起作用。

import React from "react";

import Layout from "@/components/Layout/index";
import Good from "@/articles/good.mdx"; // this line show typescript error

const index = () => {
  return (
    <Layout>
      <Good />
    </Layout>
  );
};

export default index;

Package.json（删除了一些无关的）

{
  "dependencies": {
    "@next/mdx": "^10.2.0",
    "@types/react-transition-group": "^4.4.1",
    "next": "10.1.3",
    "next-seo": "^4.24.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-query": "^3.13.11",
    "react-transition-group": "^4.4.1"
  },
  "devDependencies": {
    "@mdx-js/loader": "^1.6.22",
    "@types/node": "^15.0.1",
    "@types/react": "^17.0.4",
    "@types/webpack-env": "^1.16.0",
    "autoprefixer": "^10.2.5",
    "typescript": "^4.2.4"
  }
} …