Part 7: Streamlining Your Next.js App with a Custom App Component

[Page] Routing and Navigation

[Page] Routing and Navigation

In our previous work, we created a shared NavBar component and successfully integrated it into multiple pages in our Next.js application However, we still noticed some repetition in the basic structure of our pages. To address this, we can utilize Next.js's custom App component feature to define a common layout for all our pages.

Why Use a Custom App Component?

Most websites share a common layout across different pages, typically consisting of elements like headers, footers, and navigation bars. By defining this layout in a single place, we eliminate the need to duplicate code across pages, making our application cleaner and easier to maintain.

Step 1: Creating the Custom App Component

To get started, we'll create a special file named _app.js inside the pages directory. This file allows us to define a custom App component, which acts as a wrapper for all other pages.

Here's how you can set up the custom App component:

// File: pages/_app.js
import NavBar from '../components/NavBar';

function App({ Component, pageProps }) {
  return (
    <>
      <header>
        <NavBar />
      </header>
      <Component {...pageProps} />
    </>
  );
}

export default App;

Understanding the Code

• Component Prop: This represents the page component that should be rendered. It changes based on the current route, allowing us to insert page-specific content within a consistent layout.

• pageProps: These are the props specific to each page that need to be passed to the Component.

• Reusable Layout: The NavBar is included within the header, ensuring that all pages have a consistent navigation bar.

Step 2: Restart the Development Server

After creating a custom App component, you need to manually restart the development server. This is a unique requirement because the App component is fundamental and affects all pages.

To restart:

1. Stop the server with Ctrl+C.

2. Run npm run dev to restart the server.

Step 3: Refactor Existing Pages

With the custom App component in place, we can now remove redundant code from our individual pages. Let's update about.js and index.js by removing the NavBar imports and the duplicated header sections.

Updating the About Page

// File: pages/about.js

function AboutPage() {
  console.log('[AboutPage] render');
  return (
    <main>
      <h1>About</h1>
    </main>
  );
}

export default AboutPage;

Updating the Home Page

// File: pages/index.js

function HomePage() {
  console.log('[HomePage] render');
  return (
    <main>
      <h1>My Blog</h1>
    </main>
  );
}

export default HomePage;

Conclusion

By using a custom App component in Next.js, we've successfully extracted the common layout from our individual pages and centralized it. This not only reduces code duplication but also simplifies future updates to the layout. The custom App component serves as the perfect place to implement code that applies globally to all pages in your application. Now, your Next.js app is more organized, efficient, and scalable. Happy coding!