1.Create a new file for your component:
Inside your project’s components directory or any other designated folder for components, create a new file for your component. For example, let’s create a simple component named MyComponent.js.
// components/MyComponent.js
import React from ‘react’;
const MyComponent = () => {
return (
<div>
<p>This is my custom component!</p>
</div>
);
};
export default MyComponent;
2.Use the component in a page or another component:
After creating the component, you can import and use it in your pages or other components.
// pages/index.js (or any other page or component)
import React from ‘react’;
import MyComponent from ‘../components/MyComponent’;
const HomePage = () => {
return (
<div>
<h1>Welcome to my Next.js App</h1>
<MyComponent />
</div>
);
};
export default HomePage;
Finally run the component in terminal using the command, npm run dev.