mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
4d8442af58
This PR updates the with-styled-jsx example to use the App Router. Here are the changes that have been made: - Renamed the `pages` folder to the `app` folder. - Added the `layout.tsx` file as part of the App Router. - Updated the `package.json` file. The following actions were performed as part of this PR: - Ran `pnpm prettier-check` with no issues found. - Executed the `pnpm check-examples` script. CC: @samcx --------- Co-authored-by: samcx <[email protected]>
24 lines
700 B
TypeScript
24 lines
700 B
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { useServerInsertedHTML } from "next/navigation";
|
|
import { StyleRegistry, createStyleRegistry } from "styled-jsx";
|
|
|
|
export default function StyledJsxRegistry({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
// Only create stylesheet once with lazy initial state
|
|
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
|
|
const [jsxStyleRegistry] = useState(() => createStyleRegistry());
|
|
|
|
useServerInsertedHTML(() => {
|
|
const styles = jsxStyleRegistry.styles();
|
|
jsxStyleRegistry.flush();
|
|
return <>{styles}</>;
|
|
});
|
|
|
|
return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>;
|
|
}
|