Раньше я довольно активно использовал React, но я новичок в Next.js, и логика макета не имеет для меня особого смысла. Насколько я понимаю, если Layout.js находится в /app, это означает, что макет применяется ко всему приложению, а это именно то, что мне нужно. Теперь я хочу иметь верхний и нижний колонтитулы. Нижний колонтитул должен прилипать к нижней части страницы, а заголовок должен прилипать к верху и не скрываться при прокрутке. Мне удалось добиться этого, поместив свои компоненты в page.js, но как только я начал использовать маршрутизацию, я понял, что это не подходящее место для них, и, согласно документации, вместо этого они должны быть в Layout.js. :
Код: Выделить всё
import { Inter } from "next/font/google";
import "./globals.css";
import FooterComponent from "@/app/components/footer/footer.component";
import HeaderComponent from "@/app/components/header/header.component";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Solute Art Studio",
};
export default function RootLayout({ children }) {
return (
{children}
);
}
Как только я переместил их туда, я нарушил липкость заголовка, теперь он исчезает при прокрутке. И нижний колонтитул по-прежнему находится внизу, но даже если между верхним и нижним колонтитулом ничего нет, мне приходится прокручивать его. У меня такое чувство, будто я сломал CSS после того, как переместил эти компоненты в Layout.js. Что я делаю не так? Я использую попутный ветер. Заголовок: .... Нижний колонтитул: ...
Подробнее здесь:
https://stackoverflow.com/questions/785 ... th-next-js
Мобильная версия