http-status-codes.md

HTTP Status Codes

NextJS's App Router does not support setting custom HTTP Status Codes. As a result, requests to a non-existing WordPress page will return a STATUS 200 code when returning Block Theme's 404 page.

Although Vercel insists this doesn't affect SEO, you can choose to opt-out of using the TemplateRenderer and provide your own Not Found page - or even redirect() to a different WordPress - or non-WordPress - route.

Example: Using QueryEngine.getTemplateData().is404

SnapWP's QueryEngine.getTemplateData() returns an is404 boolean to detect routes that resolve to your Block Theme's 404 page. Here's how to use it with Next.js:

import { notFound } from 'next/navigation';
import { TemplateRenderer } from '@snapwp/next';
import { EditorBlocksRenderer } from '@snapwp/blocks';
import { QueryEngine } from '@snapwp/query';

export default async function Page( {
	params,
}: {
	params: { path?: string[] };
} ) {
	const { path } = await params;
	const pathname = path?.join( '/' ) || '/';

	const { is404 } = await QueryEngine.getTemplateData( pathname );

	if ( is404 ) {
		notFound();
	}

	return (
		<TemplateRenderer>
			{ ( editorBlocks ) => (
				<EditorBlocksRenderer editorBlocks={ editorBlocks } />
			) }
		</TemplateRenderer>
	);
}