fix: バンドルサイズの最適化

next.config.js

@@ -6,5 +6,8 @@
 const nextConfig = {
   output: "export",
 };
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -25,6 +25,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@next/bundle-analyzer": "^14.0.4",
     "date-fns": "^2.30.0",
     "emojify-tag": "^1.0.0",
     "framer-motion": "^10.16.12",

src/app/components/navigation.tsx

@@ -14,10 +14,11 @@ import {
   useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react";
-import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import NextLink from "next/link";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
+import { faMoon } from "@fortawesome/free-solid-svg-icons/faMoon";
+import { faSun } from "@fortawesome/free-solid-svg-icons/faSun";
 import { useRef } from "react";
 
 export interface LinksProps {

src/app/components/prev-next-link.tsx

@@ -1,7 +1,8 @@
 import { Button, Flex, Spacer } from "@chakra-ui/react";
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import NextLink from "next/link";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 
 export type PrevNextLinkProps = {
   prevLinkHref: string | null;

src/app/components/sns-link.tsx

@@ -1,7 +1,9 @@
-import { IconDefinition, faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { IconDefinition } from "@fortawesome/free-brands-svg-icons";
 import { Link } from "@chakra-ui/react";
 import type { SNSLinkInfo } from "../lib/member-fetch";
+import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons/faTwitter";
 
 type Icon = { icon: IconDefinition };
 

src/app/providers.tsx

@@ -1,13 +1,16 @@
 "use client";
 
+import { LazyMotion, domAnimation } from "framer-motion";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./lib/theme";
 import { yearContext } from "./lib/year-context";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <yearContext.Provider value={new Date().getFullYear()}>
-      <ChakraProvider theme={theme}>{children}</ChakraProvider>
+      <LazyMotion features={domAnimation}>
+        <ChakraProvider theme={theme}>{children}</ChakraProvider>
+      </LazyMotion>
     </yearContext.Provider>
   );
 }

tsconfig.json

@@ -23,5 +23,5 @@
     ]
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
+  "include": ["next.config.js", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }