在 nextjs 页面文件夹中重用模板

Question

假设我的 /pages 文件夹中有以下文件。如果我想对 cats/[slug] 和 dogs/[slug] 路线（但不是鱼）使用完全相同的模板，我该怎么做？现在我有文件的副本...

  index.js
  cats.js
  dogs.js
  fish.js
    /cats
      [slug].js
    /dogs
      [slug].js
    /fish
      [slug].js

Answer 1

您可以在 components 文件夹中定义一个组件并从那里使用它吗？

components/Animal.jsx

const Animal = () => {
  // component here
};

export default Animal;

pages/cats/[slug].jsx

import Animal from '../components/Animal';

const Cat = () => {
  return (
    <Animal
      kind="cat"
      {...otherAnimalProps}
    />
  );
};

export default Cat;

在 nextjs 页面文件夹中重用模板

reusing a template in the nextjs pages folder

next.js