Как определить разные макеты для разных маршрутов в Next.js внутри папки страниц?
Я хотел бы реализовать маршрутизацию на основе макета в моем каталоге pages. Я ищу способ использовать что-то похожее на файл _app.tsx, но только для файлов внутри определенной папки.
Это будет работать аналогично стилю маршрутизации Remix, где есть папка, такая как panel, и файл с именем panel.tsx, который упаковывает файлы в папку «панель» с макетом.
Как я могу добиться чего-то подобного в каталоге Next.js pages?
Что я хочу:
pages/
panel/
index.tsx
dashboard.tsx
panel.tsx
Файл panel.tsx будет функционировать как макет в новом каталоге app, в основном я хочу найти способ обернуть файлы внутри папки точно так же, как это делает Remix или новый каталог app
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
То, о чем вы говорите, называется Постраничные макеты в Next.js. И это работает следующим образом, как вы можете прочитать в документе:
Если вам нужно несколько макетов, вы можете добавить на свою страницу свойство
getLayout, позволяющее возвращать компонент React для макета. Это позволяет определить макет для каждой страницы. Поскольку мы возвращаем функцию, при желании у нас могут быть сложные вложенные макеты.
// pages/index.js
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
export default function Page() {
return (
/** Your content */
)
}
Page.getLayout = function getLayout(page) {
return (
<Layout>
<NestedLayout>{page}</NestedLayout>
</Layout>
)
}
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout || ((page) => page)
return getLayout(<Component {...pageProps} />)
}
Вышеприведенное относится к странице /, но логика одинакова для любого маршрута. Просто адаптируйте имена импорта и макетов, и все будет готово.
Спасибо, это работает, хотя это не совсем так, как я хотел, но я могу добиться того, чего хотел, используя это. Разве это не просто обертывание компонента вокруг макета. я имею в виду, я думаю, что мы можем добиться того же результата, просто обернув компонент внутри компонента макета, например.