如何在 NEXTJS 中制作和导入可重用组件答案

【问题标题】：How to make and import reusable components in NEXTJS如何在 NEXTJS 中制作和导入可重用组件
【发布时间】：2022-01-09 13:49:38
【问题描述】：

如何在 NEXTJS 中制作和导入可重用组件

我是 nextjs 新手，但我熟悉 react。

Next JS 在制作可重用组件时让我有些困惑。

例如：-

在 React 中 - 我们创建可重用的组件，如下面提到的代码

代码路径----> src/components/button.js

import React from 'react';

const ButtonComponent = (props) => {
    return (
        <>
            <button>{props.children}</button>
        </>
    )
}

export default ButtonComponent;

但是同样的代码也可以用在 NEXTJS 中吗？

如果是，那么组件目录的路径应该在哪里？

更新 1：

我的下一个js文件夹结构

https://prnt.sc/26bqbks

但现在的问题是，如果我尝试使用 react bootstrap，它会给我一个错误

找不到模块

截图 -> https://prnt.sc/26bqca7

更新 2：

好的，我已经重新安装了 react-bootstrap，现在我得到了截图中提到的错误 ---> https://prnt.sc/26bqinu

更新 3

回购代码

https://github.com/Yusufzai/test-next-js-bootstrap

【问题讨论】：

你是如何导入 react-bootstrap 的？我可以看看你的 package.json 文件吗？或者您可以发送指向您的仓库的链接吗？
@JevonCochran 感谢您的回复。截图 1 --> prnt.sc/26bqotj 和截图 2 ---> prnt.sc/26bqp3c
以下是我的回购链接 ---> github.com/Yusufzai/test-next-js-bootstrap
用回购链接更新了我的问题
现在查看

标签： reactjs next.js

【解决方案1】：

你的路径应该是相对于你当前页面的。

假设您有一个页面pages/test.js。

test.js

import Component "../components/Component";
// use here

【讨论】：

感谢您的回复为您提供我的 nextjs 文件夹结构
更新了我的问题，请查看
您尝试在哪个文件中导入组件？

【解决方案2】：

我下载了你的仓库。能够很好地点燃它。只需删除您的 node_modules 文件夹。重新启动您的服务器。然后运行 npm i。

【讨论】：