Bullshit

2025-08-09 01:12:10 +02:00
commit 2f72eb55ab
8 changed files with 1545 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+.next
+out
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
--- a/next.config.js
+++ b/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "my-materialui-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "next": "^13.5.11",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import { CssBaseline, AppBar, Toolbar, Typography, Button } from '@mui/material';
+
+export default function MyApp(props) {
+  const { Component, pageProps } = props;
+
+  React.useEffect(() => {
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>My Next.js with MUI App</title>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <CssBaseline />
+
+      {/* Global AppBar */}
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            My App
+          </Typography>
+          <Button color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+
+      <Component {...pageProps} />
+    </React.Fragment>
+  );
+}
+
+MyApp.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  pageProps: PropTypes.object.isRequired,
+};
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import createEmotionServer from '@emotion/server/create-instance';
+import createEmotionCache from '../src/createEmotionCache';
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {this.props.emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+MyDocument.getInitialProps = async (ctx) => {
+  const originalRenderPage = ctx.renderPage;
+
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      key={style.key}
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
+
+  return {
+    ...initialProps,
+    emotionStyleTags,
+  };
+};
--- a/pages/index.js
+++ b/pages/index.js
@@ -0,0 +1,14 @@
+import { Button, Typography, Container } from '@mui/material';
+
+export default function Home() {
+  return (
+    <Container>
+      <Typography variant="h2" gutterBottom>
+        Welcome to Next.js with Material-UI!
+      </Typography>
+      <Button variant="contained" color="primary">
+        Click me
+      </Button>
+    </Container>
+  );
+}
--- a/src/createEmotionCache.js
+++ b/src/createEmotionCache.js
@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache';
+
+export default function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true });
+}