NextJS: How to parameterize function to render specific content based off link?

Question

I have the following in /pages/index.js:

export default function Home() {
  return (
    <div className={styles.grid_container}>
      <NavBar/> 
      <div className={styles.center_pane}>
        <Overview/>
      </div>
      <div className={styles.right_pane}>
        <h2>Right Pane</h2>
      </div>
      <Footer/>
    </div> 
  )
}

It renders everything fine but I need some way of parameterizing the <Overview/> element so that depending on what page the user navigates to from the <Navbar> it will render the corresponding component.

The option I was considering was just creating a page for each link but seems very inefficient.

This question seemed very similar but it never recieved an answer: Nextjs: render content based on sidebar choice

Any help would be appreciated, thanks.

What Is the behavior of the click on sidebar ? Change state, change Path ? — dna, Mar 19 '21 at 21:25
@dna It changes the path but I don't think it has to be that way. — Cogito Ergo Sum, Mar 19 '21 at 21:26
Id you change page you Must create another page. You can optimize your code with a layout component and change only the children in each Page, otherwise you can use a query param instead and render a component based on a condition. Buy keep It simple change page and change component — dna, Mar 19 '21 at 21:42

André Oliveira · Accepted Answer · 2021-03-19T22:20:35.367

you just need to create separated files for each page, so let's say you have an item on the menu called "Overview", you can create a pages/overview.js file, and Next.js will automatically recognize that when you navigate to youraddress.com/overview you want to open the overview component.

And to reuse the logic "around" your overview component you need to create a layout.

You would need to something like this:

// components/navbar.js

const Navbar = () => {
  return <div>This is appears everywhere!</div>;
};

export default Navbar;


 // components/Layout.js
    
import Head from "next/head";

import Navbar from "./Navbar";

const Layout = ({ children }) => {
  return (
    <div>
      <Head>
        <title>Your awesome App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Navbar />
      {children}
    </div>
  );
};

export default Layout;
    
    
 // Wrapping your index.js into your layout
import Layout from "../components/Layout";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <Layout>
      <div className={styles.container}>This is the home page</div>
    </Layout>
  );
}

// pages/overview.js (the name of the file is the route, so by creating overview you can access localhost:3000/overview and next.js will redirect

import Layout from "../components/Layout";
import styles from "../styles/Home.module.css";

export default function overview() {
  return (
    <Layout>
      <div className={styles.container}>This is overview page</div>
    </Layout>
  );
}

For the full source code check https://github.com/and-dutra/minimal-nextjs-layout

I am new to front end development so I don't know how to do any of that off hand. I will look into it and mark it as answer if I can figure it out. — Cogito Ergo Sum, Mar 19 '21 at 21:44
Hey Michael, i'm going to add an example to makes thinks easier, did you used npx create-next-app to start your project? — André Oliveira, Mar 19 '21 at 22:01
That would help a lot. I did, I added a components directory at the top level though. — Cogito Ergo Sum, Mar 19 '21 at 22:04
All i had to do was give the
in the layout a grid-container className then it is working perfectly. I really appreciate the help! — Cogito Ergo Sum, Mar 19 '21 at 23:41

NextJS: How to parameterize function to render specific content based off link?

1 Answers1