Magnolia NextJs Headless Frontend

• Templates
• Proxy/Middleware
• Config
• API
• Dynamic-Page

setup

• Add the following dependencies to your package.json

  • @merkle-open/magnolia-headless-frontend-nextjs
  • tsyringe
  • reflect-metadata
  • next
  • react
  • react-dom

• Configure tsconfig.json to include the following settings (./tsconfig.json)

  {
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true
    },
    "include": [
      "node_modules/@merkle-open/magnolia-headless-frontend-nextjs"
    ]
  }

• Configure the middleware composer

• Implement and bind the interfaces specified here

• Implement API endpoints specified here

• Configure instrumentation.ts (./instrumentation.ts)

  export async function register() {
      await import('reflect-metadata');
  }

• Setup dynamic page

• Setup Dependencies (./Dependencies.ts)

  import 'reflect-metadata';
  import { container } from 'tsyringe';
  import { register as registerOss } from '@merkle-open/magnolia-headless-frontend-nextjs';
  import registerConfigs from './config/_Dependencies.ts';
  
  registerConfigs(container);
  registerOss(container);
  
  export { container };

• Setup next.config.ts (./next.config.ts)

  import type { NextConfig } from 'next';
  import type { Rewrite } from 'next/dist/lib/load-custom-routes';
  
  const nextConfig: NextConfig = {
      transpilePackages: ['@merkle-open/magnolia-headless-frontend-nextjs'],
      async rewrites(): Promise<Rewrite[]> {
          return [
              {
                  source: '/robots.txt',
                  destination: '/api/robots.txt',
              },
              {
                  source: '/:language([a-z]{2})/sitemap/:type',
                  destination: '/api/:language/sitemap/:type',
              },
              {
                  source: '/:language([a-z]{2})/:path*',
                  destination: '/dynamic/:language/:path*',
              },
          ];
      },
      ...
  };
  export default nextConfig;

local development

npm link doesn't work with tsyringe, because the app and this lib's tsyringe modules have completely independent (global) variables (see this comment). workaround using symbolic links:

{
  ...
  "scripts": {
      "link-local-headlessOss": "npm link @merkle-open/magnolia-headless-frontend-nextjs && APP_DIR=`pwd` && cd node_modules/@merkle-open/magnolia-headless-frontend-nextjs && npm link ${APP_DIR}/node_modules/tsyringe"
  },
  ...
}