mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
a1dbc073e4
This PR updates the `with-goober` example to use the App Router. Here
are the changes that have been made:
- Renamed the `pages` folder to the` app` folder.
- Converted the `index.tsx` to ` page.tsx ` file as part of the App
Router.
- Created a new `layout.tsx` file in the app directory.
- Merged functionality from both `_app.tsx` and `_document.tsx` into
`layout.tsx`:
- Goober setup from `_app.tsx`
- CSS extraction and injection from `_document.tsx`
- 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]>
27 lines
658 B
TypeScript
27 lines
658 B
TypeScript
import { createElement } from "react";
|
|
import { setup } from "goober";
|
|
import { prefix } from "goober/prefixer";
|
|
import { extractCss } from "goober";
|
|
|
|
// goober's needs to know how to render the `styled` nodes.
|
|
// So to let it know, we run the `setup` function with the
|
|
// `createElement` function and prefixer function.
|
|
setup(createElement, prefix);
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const css = extractCss();
|
|
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<style id={"_goober"} dangerouslySetInnerHTML={{ __html: " " + css }} />
|
|
</head>
|
|
<body>{children}</body>
|
|
</html>
|
|
);
|
|
}
|