Here’s is the structure of my NextJS project:
├── app
│ ├── admin
│ │ ├── login
│ │ │ ├── layout.js
│ │ │ └── page.js
│ │ ├── users
│ │ │ └── page.js
│ │ ├── layout.js
│ │ └── page.js
│ ├── layout.js
│ └── page.js
For some reason, it throws error saying “Expected server HTML to contain a matching in ” when you access localhost:3000/admin/login. When I tried removing layout.js from login directory, the error was gone. I also tried editing the layout.js from admin directory and the changes is also showing in /admin/login page.
/admin/login/page.js
export default function Page() {
return (
<h1>Hello Login</h1>
);
}
/admin/login/layout.js
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function LoginLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
Admin also has the same codes for both layout.js and page.js