Server component of Next.js' AppRouter, which provides a ContextAPI-like mechanism.
Context instances are created for each component tree. Contexts cannot be retrieved from ServerActions functions.
Normally page.tsx -> layout.tsx is executed in this order, but with this library layout.tsx -> page.tsx will be executed in this order.
- GitHub
https://github.com/SoraKumo001/next-approuter-context-test - Vercel
https://next-approuter-context-test.vercel.app/
Name the context so that it can be identified when retrieving data
import { createMixContext } from "next-approuter-context";
export const context1 = createMixContext<{ text: string; color: string }>(
"context1"
);
export const context2 = createMixContext<number>("context2");Set data in Provider
import { context1, context2 } from "./context";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<context1.Provider
value={{ text: "Send colors and text from Layout", color: "red" }}
>
<context2.Provider value={123456}>{children}</context2.Provider>
</context1.Provider>
</body>
</html>
);
}Place Server/Client components
import { Client } from "./client";
import { Server } from "./server";
const Page = () => {
return (
<>
<Server />
<Client />
</>
);
};
export default Page;Server component handles retrieving values from context
"use server";
import { context1, context2 } from "./context";
import { getMixContext } from "./next-approuter-context";
export const Server = async () => {
const { text, color } = await getMixContext(context1);
const value = await getMixContext(context2);
return (
<>
<div style={{ color }}>
Server: {text} - {value}
</div>
</>
);
};Client component handles retrieving values from context
"use client";
import { useMixContext } from "next-approuter-context";
import { context1, context2 } from "./context";
export const Client = () => {
const { text, color } = useMixContext(context1);
const value = useMixContext(context2);
return (
<>
<div style={{ color }}>
Client: {text} - {value}
</div>
</>
);
};