Next: Optimized for Production

Author: prathamesh-mutkure

Projects/blog-nextjs/components/home-page/hero.js

@@ -9,7 +9,7 @@ const Hero = () => {
         <Image src="/images/site/max.png" height={300} width={300} alt="Hero" />
       </div>
 
-      <h1>Hi, I'm Max</h1>
+      <h1>Hi, I&apos;m Max</h1>
 
       <p>
         I blog about Web Development - especially frameworks like React and

Projects/blog-nextjs/components/layout/logo.js

@@ -1,7 +1,7 @@
 import classes from "./logo.module.css";
 
 const Logo = (props) => {
-  return <div className={classes.logo}>Max's Next Blog</div>;
+  return <div className={classes.logo}>Max&apos;s Next Blog</div>;
 };
 
 export default Logo;

Projects/blog-nextjs/components/posts/post-detail/post-content.js

@@ -2,8 +2,15 @@ import ReactMarkdown from "react-markdown";
 import classes from "./post-content.module.css";
 import PostHeader from "./post-header";
 import Image from "next/image";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dark } from "react-syntax-highlighter/dist/cjs/prism";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import atomDark from "react-syntax-highlighter/dist/cjs/styles/prism/atom-dark";
+import js from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
+import jsx from "react-syntax-highlighter/dist/cjs/languages/prism/jsx";
+import css from "react-syntax-highlighter/dist/cjs/languages/prism/css";
+
+SyntaxHighlighter.registerLanguage("javascript", js);
+SyntaxHighlighter.registerLanguage("jsx", jsx);
+SyntaxHighlighter.registerLanguage("css", css);
 
 const PostContent = (props) => {
   const { slug, image, title, content } = props.post;
@@ -51,7 +58,7 @@ const PostContent = (props) => {
       const language = className.split("-")[1];
 
       return (
-        <SyntaxHighlighter language={language} style={dark}>
+        <SyntaxHighlighter language={language} style={atomDark}>
           {children}
         </SyntaxHighlighter>
       );

Projects/blog-nextjs/next.config.js

@@ -1,7 +1,22 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-}
 
-module.exports = nextConfig
+const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
+
+const nextConfig = (phase) => {
+  const env =
+    phase === PHASE_DEVELOPMENT_SERVER
+      ? {
+          api: "/api/dev",
+        }
+      : {
+          api: "/api/prod",
+        };
+
+  return {
+    reactStrictMode: true,
+    swcMinify: true,
+    env,
+  };
+};
+
+module.exports = nextConfig;