@kvet/next-layout v0.3.1
NextJS Layout Component
The simple and powerful NextJS layout solution
Motivation
NextJS lacks layouting solution for a long time. And however the NextJS team intruduced Layouts RFC, we still need a solution right now. Introducing my vision of simple and powerfull NextJS layout component.
The idea is pretty simple. And it was already described here: https://nextjs.org/docs/basic-features/layouts. But there is one problem. It is not so useful without hooks in layout. Hooks can be used to fetch data, check validity of route queries and so on. Also, it allows to trully decouple layout components.
Please check the demo: https://next-layout-taupe.vercel.app/
Basic usage
Installation
# npm
npm i @kvet/next-layout
# yarn
yarn add @kvet/next-layout
Add the layout component to a custom '_app.tsx' file
// pages/_app.tsx
import { AppPropsWithLayout, LayoutHost } from "@kvet/next-layout";
export default function App({ Component, pageProps }: AppPropsWithLayout) {
return <LayoutHost PageComponent={Component} pageProps={pageProps} />;
}
Adopt layouts for pages
// pages/index.tsx
import { pageComponentWithLayout } from "@kvet/next-layout";
import { useEffect, useState } from "react";
import Breadcrumbs from "../components/Breadcrumbs";
import Layout from "../components/Layout";
export default pageComponentWithLayout(
function Page() {
return <main>This is the page component</main>;
},
function PageLayout({ PageComponent, pageProps }) {
// Data loading simulation
const [pathParts, setPathParts] = useState<{ title: string; path: string }[]>([]);
useEffect(() => {
setTimeout(() => {
setPathParts([{ title: "Main", path: "/" }]);
}, 1000);
}, []);
return (
<Layout key="layout">
<Breadcrumbs key="breadcrumbs" pathParts={pathParts} />
<PageComponent {...pageProps} />
</Layout>
);
}
);
NOTE:
- It is recommended to specify React keys for significant parts of layout to prevent re-render.
- The PageLayout function here may seem like a functional React component, but it is not under the hood. You can assume that it is a functional React component (to apply eslint checks, for example) but keep in mind that it is just a function that supports hooks definitions.
Error handling
The lib allows to intercept route params and show custom errors.
// pages/with-error.tsx
import { pageComponentWithLayout } from "@kvet/next-layout";
import Layout from "../components/Layout";
import Error from "next/error";
export default pageComponentWithLayout(
function Page() {
return <main>This is the page component</main>;
},
function PageLayout({ PageComponent, pageProps }) {
const router = useRouter();
if (!router.isReady) {
return null;
}
if (router.query["show_error"]) {
return (
<Error statusCode={404} />
);
}
return (
<Layout key="layout">
<PageComponent {...pageProps} />
</Layout>
);
}
);
Route params parsing and validation
With the error handling approach described above, it is also possible to parse and validate route params. Check the example:
// pages/with-param-validation/[id].tsx
import { pageComponentWithLayout } from "@kvet/next-layout";
import Layout from "../components/Layout";
import Error from "next/error";
type PageProps = { id: number }; // Page component props
type GlobalPageProps = {}; // Global page props received from the '_app.tsx'
function isPositiveInteger(value: string): boolean {
return /^\d+$/.test(value);
}
function safeParsePositiveIntegerParam(
param: string | readonly string[] | undefined
): number | undefined {
if (!param || typeof param !== "string" || !isPositiveInteger(param)) {
return undefined;
}
const parsedValue = parseInt(param, 10);
return parsedValue !== 0 ? parsedValue : undefined;
}
export default pageComponentWithLayout<PageProps, GlobalPageProps>(
function Page({ id }) {
return <main>This is the page component with the id '{id}'</main>;
},
function PageLayout({ PageComponent, pageProps }) {
const router = useRouter();
if (!router.isReady) {
return null;
}
const id = safeParsePositiveIntegerParam(router.query.id);
if (id === undefined) {
return (
<Error statusCode={404} />
);
}
return (
<Layout key="layout">
<PageComponent {...pageProps} id={id} />
</Layout>
);
}
);
License
Released under the MIT License.
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago