Shared components in Next.js
Today we will show you how to create shared components in Next.js. With the help of shared components, we can reduce the logic of the application and organize the work together.
Shared components between pages, How to create common component in Next.js, Persistent Layout Patterns in Next.js, Build website in Next.js, Sharing component in Next.js with Custom application, Getting start with Next.js Framework for server-rendered React application.
Checkout more articles on ReactJS
We will continue with the previous Next.js article and optimize the pages with the help of higher order components.
Steps to implement shared components
1. Setup Next.js application
In order to setup Next.js application, please follow the link below for your reference.
We will continue with the previous article and create the Layout component and share it with pages.
2. Create shared component
To create a shared component, First you have to create a components folder in the root directory. Now let’s create a Layout component in components directory.
We should have Header, Footer, Title and basic structure in the Layout component. Following code will help you to create it.
components/Layout.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import Link from "next/link"; import Head from "next/head"; const Layout = ({ children, title }) => { return <div className="p-3"> <Head> <title>{title} - Clue Mediator</title> </Head> <h3><a href="https://www.cluemediator.com/">Clue Mediator</a></h3> <br /> <Link href="/"> <a style={{ marginRight: 15 }}>Home</a> </Link> <Link href="/about"> <a style={{ marginRight: 15 }}>About</a> </Link> <Link href="/contact"> <a>Contact</a> </Link> <h1>{title}</h1> {children} <div style={{ marginTop: 30 }}> © {new Date().getFullYear()} </div> </div> } export default Layout; |
3. Import shared component in pages
We have successfully created the shared component and now it’s time to import it in pages. We need to import it the same as the other files in the pages. We will also pass the title as props in the shared component.
I have updated the changes in each file. Refer below code for your understanding.
pages/index.js
1 2 3 4 5 6 7 | import Layout from "../components/Layout"; const Index = () => <Layout title="Home"> <p>Welcome to the Home page!</p> </Layout> export default Index; |
pages/about.js
1 2 3 4 5 6 7 | import Layout from "../components/Layout"; const About = () => <Layout title="About"> <p>This is About page!</p> </Layout> export default About; |
pages/contact.js
1 2 3 4 5 6 7 | import Layout from "../components/Layout"; const Contact = () => <Layout title="Contact"> <p>This is Contact page!</p> </Layout> export default Contact; |
4. Output
Only that’s the changes required for the shared components. You may modify the component or create more components based on your needs. Output should remain the same as the previous article.
Thank you for reading. Happy Coding!
Would be great to see protected routes in NextJS! Thanks for the help with coding 😉
Thank you