Where should Next.js metadata title template '%s | my app' be defined?

In the App Router, define it in the metadata export from app/layout.js or app/layout.tsx. Child page titles are formatted by the parent layout title.template.

Is Next.js images remotePatterns pathname optional?

The pathname field can be omitted, but production apps should usually specify it, such as /account123/**, to avoid allowing every image path from the host.

Is React Strict Mode enabled by default in the Next.js App Router?

The official docs state that since Next.js 13.5.1, Strict Mode is true by default with the App Router; reactStrictMode is mainly needed for pages router projects.

Next.js Metadata Title Template, remotePatterns, and Strict Mode

Short Answer

1. title.template: "%s | my app" usually belongs in the metadata export from app/layout.js or app/layout.tsx. When a child page defines title: "Dashboard", the final title becomes Dashboard | my app.

2. "%s | my app" and "%s | myapp" are the same to Next.js. The only difference is your brand text; choose the real brand spelling and use it consistently.

3. images.remotePatterns.pathname can be omitted, but you should usually specify it in production to avoid allowing every image path on a remote host.

4. App Router Strict Mode is documented as enabled by default since Next.js 13.5.1, so most App Router projects do not need reactStrictMode: true.

1. How to Write metadata title.template

In the App Router, static metadata can be exported from layout.js or page.js. The official docs describe the Metadata API as the supported way to improve SEO and sharing metadata; Next.js resolves it and creates the relevant <head> tags.

app/layout.tsx:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "my app",
    template: "%s | my app",
  },
  description: "A production Next.js application",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app/dashboard/page.tsx:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Dashboard",
  description: "View your account dashboard",
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

The resulting browser title is Dashboard | my app. If your query is next.js metadata title template '%s | myapp' layout.js, use "%s | myapp" instead. The behavior is identical.

Official docs: generateMetadata / metadata

2. title.default, template, and absolute

Field	Use	Example result
`default`	Fallback title when a child route has no title	`my app`
`template`	Formats child route titles; `%s` is replaced by the child title	`Pricing \| my app`
`absolute`	Bypasses the parent template and outputs the full title	`Brand Campaign 2026`

For SEO, %s | Brand is a common pattern. If the brand is myapp, write %s | myapp. If the product name includes a space, write %s | my app. Keep it short enough to avoid search result truncation.

3. Is images.remotePatterns.pathname Optional?

Short answer: it can be omitted, but specify it when you can. remotePatterns tells next/image which remote images may be optimized. Production apps should restrict protocol, hostname, and path instead of broadly allowing an entire host.

Recommended:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
        pathname: "/blog/**",
      },
    ],
  },
};

module.exports = nextConfig;

Too broad for many production apps:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.example.com",
      },
    ],
  },
};

The second form expresses that images from that host are allowed, but the boundary is loose. If you only need images under /blog/, pathname: "/blog/**" is clearer, safer, and easier to debug.

Official docs: next.config.js images

4. App Router React Strict Mode Default

If your project uses the app/ directory, the official docs currently say that since Next.js 13.5.1, Strict Mode is true by default with the App Router. Most App Router projects do not need to repeat reactStrictMode: true in next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // App Router projects already default to Strict Mode.
  // Only set this if you intentionally need to disable it:
  // reactStrictMode: false,
};

module.exports = nextConfig;

For a legacy pages/ router project, or if your team wants explicit configuration, reactStrictMode: true is still fine. For the query next.js app router react strict mode default official docs, the answer is: App Router defaults to Strict Mode unless you disable it.

Official docs: reactStrictMode

Production Checklist

Set metadata.title.default and metadata.title.template in the root layout; page routes should define only their page title.
Keep the brand spelling consistent. Do not mix my app and myapp unless they intentionally refer to different names.
Use remotePatterns for remote images, and specify protocol, hostname, and pathname when possible.
App Router defaults to Strict Mode; only consider reactStrictMode: false when you have a documented compatibility issue.
Use generateMetadata on dynamic pages to return title, description, Open Graph data, and canonical details from your data source.