Web Developers : 16-Build a Shared Navigation Bar in Next.js Using the _app.js File

Screenshot from the tutorial

Building a Shared Navigation Bar in Next.js Using the _app.js File

In modern web development, creating a shared navigation bar that can be accessed across different pages is essential for enhancing user experience. In this tutorial, we will discuss how to build a shared navigation bar in Next.js using the special _app.js file. This approach allows us to maintain a consistent navigation structure throughout our application without repeating code.

What is Next.js?

Next.js is a powerful React framework that simplifies server-side rendering, static site generation, and building APIs. Its built-in features make it an excellent choice for developers aiming to create robust web applications.

Understanding the _app.js File

The _app.js file is a special file in Next.js that allows developers to override the default App component. This component is responsible for initializing pages and can be used to maintain shared layouts, such as a navigation bar, across all pages.

Prerequisites

Before we start, make sure you have:

1. Node.js installed on your machine.
2. Basic knowledge of React and JavaScript.
3. A Next.js application set up. If you don’t have one, you can create it with the following command:

npx create-next-app my-next-app
cd my-next-app

Step 1: Create the Navigation Bar Component

First, let's create a simple navigation bar component. Create a folder named components in your Next.js application, and inside it, create a file named Navbar.js.

// components/Navbar.js

import Link from 'next/link';
import styles from './Navbar.module.css'; // Optional for styling

const Navbar = () => {
    return (
        <nav className={styles.navbar}>
            <ul>
                <li><Link href="/">Home</Link></li>
                <li><Link href="/about">About</Link></li>
                <li><Link href="/contact">Contact</Link></li>
            </ul>
        </nav>
    );
};

export default Navbar;

Adding Styles

You may want to add some styles to your navigation bar. Create a Navbar.module.css file in the same components folder:

/* components/Navbar.module.css */

.navbar {
    background-color: #333;
    padding: 1rem;
}

.navbar ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;
}

.navbar a {
    color: white;
    text-decoration: none;
}

.navbar a:hover {
    text-decoration: underline;
}

Step 2: Modify the _app.js File

Next, we will import the Navbar component into the _app.js file. Open the _app.js file located in the pages directory and modify it as follows:

// pages/_app.js

import '../styles/globals.css';  // Import global styles
import Navbar from '../components/Navbar';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Navbar />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;

Explanation of the Code

1. Import Statements: We import the global CSS file and the Navbar component.
2. MyApp Component: The MyApp component wraps the Navbar component and the current page component (Component).
3. Fragment: We use a React fragment (<> and </>) to group the Navbar and Component without adding an extra node to the DOM.

Step 3: Create Additional Pages

To see your navigation bar in action, let’s create the pages linked in the navigation. Create three new files in the pages directory: about.js, contact.js, and index.js (which is already created when you set up your application).

Example Content for the Pages

1. Index Page (Home):

// pages/index.js

const Home = () => {
    return <h1>Welcome to the Home Page!</h1>;
};

export default Home;

2. About Page:

// pages/about.js

const About = () => {
    return <h1>About Us</h1>;
};

export default About;

3. Contact Page:

// pages/contact.js

const Contact = () => {
    return <h1>Contact Us</h1>;
};

export default Contact;

Step 4: Run Your Application

Now that you have set up the navigation bar and pages, it’s time to run your application. Open your terminal and run:

npm run dev

Navigate to http://localhost:3000 in your browser. You should see your navigation bar at the top, and clicking the links will take you to the respective pages.

Conclusion

In this tutorial, we explored how to build a shared navigation bar in Next.js using the _app.js file. This approach not only helps maintain a consistent layout across your application but also enhances the modularity of your code.

Feel free to expand on this by adding more links, styling, and functionality. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios