CODEWITHSUNDEEP
reactjsnext.js
Tomas Kanok
Tomas Kanok

Reputation: 135

How can I use my NextJS layout in other pages?

using next js 13.4.4 with src folder. Layout is working only on my index page. My structure is:

src/app/layout.tsx

'use client';
import './globals.css'
import { Inter } from 'next/font/google'
import Navbar from '../components/Navbar/Navbar';
import Signup from '../components/Modals/Signup';
import React, { useState } from 'react';

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleRegisterClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };
  
  return (
    <html lang="en">
      <body className={inter.className}>
      <Navbar toggleRegister={handleRegisterClick} />
      <Signup isOpen={isModalOpen} onClose={handleCloseModal} />
        {children}
        <div modal-backdrop="" className="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" style={{display: isModalOpen ? '' :'none'}}></div>
      </body>
    </html>
  )
}

src/page/calendar.tsx

function calendar() {
    return (
        <main>
            my calednar
        </main>
    );
}

export default calendar;

my index page src/app/page.tsx is working correctly. Why calendar.tsx show me an error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <html> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I do not understand how to get rid of it. Thank you for help

Upvotes: 0

Views: 475

Answers (1)

Ethan
Ethan

Reputation: 1674

Next js 13.4 makes the app router stable. You should put calendar in app/calender/page.tsx. From my testing doing this fixes the issue.

Upvotes: 2

Related Questions