横幅の制限

src/app/_components/Caption.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import WidthProvider from '@/app/_components/WidthProvider';
+
+const Caption = () => {
+  return <WidthProvider>TEST</WidthProvider>;
+};
+
+export default Caption;

src/app/_components/WidthProvider.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { ReactNode } from 'react';
+import styled from '@mui/material/styles/styled';
+
+/**
+ * 横幅を制限する
+ * @constructor
+ */
+const WidthProvider = ({ children }: { children: ReactNode }) => {
+  return <StyledDiv>{children}</StyledDiv>;
+};
+
+const paddingSide = '20px';
+
+const StyledDiv = styled('div')`
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  width: ${({ theme }) =>
+    `calc(${theme.breakpoints.values.desktop}px + calc(2 * ${paddingSide}))`};
+  padding-left: ${paddingSide};
+  padding-right: ${paddingSide};
+`;
+
+export default WidthProvider;

src/app/page.tsx

@@ -1,3 +1,9 @@
+import Caption from '@/app/_components/Caption';
+
 export default function Home() {
-  return <main>Home</main>;
+  return (
+    <main>
+      <Caption />
+    </main>
+  );
 }