My knowledge of coding is very rudimentary so please keep that in mind. I am trying to add a NavBar component to my Next.js app. I started the app with a Next.js tutorial on creating a blog site. I've been trying to add a NavBar to the my index.js file and got many errors so my page wouldn't load. I finally stopped getting errors but my NavBar still not showing. Any ideas on what you think could be wrong with my code?
I tried using the first Navbar component from Chakra ui found here. I created a NavBar file in my components folder and imported the file into my index.js. I have also downloaded my dependencies for Chakra ui but have been unable to get the Navbar to show on my browser.
Here is my Index.js code:
import Layout, { siteTitle } from '../components/layout';
import { getSortedPostsData } from '../lib/posts';
import Head from 'next/head';
import Date from '../components/date';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
import { Heading } from '@chakra-ui/react';
import NavBar from '../components/NavBar';
export async function getStaticProps() {
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData,
},
};
}
export default function Home({ allPostsData }) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<nav>{NavBar}</nav>
<section className={utilStyles.headingMd}>
<Heading as='h1' fontWeight='thin'>Jupiter Junction</Heading>
<p>
<br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
(This is a sample website - you’ll be building a site like this on{' '}
<a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul className={utilStyles.list}>
{allPostsData.map(({ id, date, title }) => (
<li className={utilStyles.listItem} key={id}>
<Link href={`/posts/${id}`}>{title}</Link>
<br />
<small className={utilStyles.lightText}>
<Date dateString={date} />
</small>
</li>
))}
</ul>
</section>
</Layout>
);
}
You can find my github repo for the app here: text
Thank you for your time and help!
Could you try
<nav><NavBar/></nav>instead of
<nav>{NavBar}</nav>?