React Series #08: How to create component in react next.js project

Step1 : Create a folder “_components” inside the app folder

Step 2: Create a file called Header.jsx and use the redux autocomplete “rfce”. See the below video

Step 3: Update the content part in Header.jsx

import React from 'react'

function Header() {
  return (
    <div>Header Content</div>
  )
}

export default Header

Step 4: Open your layout.jsx and do the import

import Header from "./_components/Header";

Step 5: You can use it this way in layout.jsx

      <body className={poppins.className}>
        <Header />

This is how you use the component in next.js project

Leave a Reply Cancel reply