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

Question

How to make and import reusable components in NEXTJS

I am new to nextjs but I am familiar with react.

Next JS confused me a bit when making reusable components.

For example:-

In React - we create reusable components like the code mentioned below

Code Path ----> src/components/button.js

import React from 'react';

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

export default ButtonComponent;

But can this same code be used in NEXTJS as well?

If yes, then where should be the path of the components directory?

Update 1:

My next js folder structure

https://prnt.sc/26bqbks

But now the problem is if I am trying to use react bootstrap it gives me an error that

module not found

Screenshot -> https://prnt.sc/26bqca7

Update 2:

Ok I have re-installed react-bootstrap and now I get the error mentioned in the screenshot ---> https://prnt.sc/26bqinu

Update 3

Repo code

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

Answer 1

Your path should be relative to your current page.

Suppose you are having a page pages/test.js .

test.js

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

Answer 2

I downloaded your repo. Was able to fire it up just fine. Just delete your node_modules folder. Restart your server. Then run npm i.