Nested Routes with Automatic Layouts

Create nested routes using the App Router and illustrate how Next.js 14 manages automatic persistent layouts for nested page components.
// pages/_app.js
import { AppRouter } from '@shopify/app-bridge-react';
import { Fragment } from 'react';

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

export default MyApp;
This sets up the main app component to use AppRouter, which allows nested routing. The AppRouter provides context for routing within the app.
// pages/layout.js
import React from 'react';

export default function Layout({ children }) {
  return (
    <div className='layout'>

Layout.getLayout = function getLayout(page) {
  return (
This is the layout component that is automatically applied to nested routes. The `getLayout` method of `Layout` makes it possible to wrap pages inside this layout without manually wrapping each page.
// pages/index.js
import Layout from './layout';

function HomePage() {
  // Page content goes here
  return <div>Welcome to the Home Page</div>;

HomePage.getLayout = Layout.getLayout;

export default HomePage;
This is the home page component. It utilizes the `getLayout` method from the `Layout` component, allowing Next.js 14 to automatically apply the layout to the home page when it is rendered.
// pages/about.js
import Layout from './layout';

function AboutPage() {
  // Page content goes here
  return <div>About us information</div>;

AboutPage.getLayout = Layout.getLayout;

export default AboutPage;
This is the about page component. Similar to the home page, it uses the `Layout.getLayout` method to wrap itself with the layout defined in the `Layout` component.