Merge pull request #170 from Web-Dev-Path/fix/next-pwa

Fix invalid next.config.js due to changes in newer next.js version

Author: cherylli

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -37,7 +37,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - normalized font sizes
 - installed yarn
 - normalized buttons' and links' styling
-- updated `package.json` commands for macOs
+- updated `package.json` commands for macOS
 - swipeable CardsColumns.js on mobile
 
 ## 1.2.0
@@ -58,7 +58,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Contact us cards section to contact page
 - Linkedin link to footer
 - Next.js 13
-- Converting components into styled-components
 
 ### Fixed
 
@@ -68,7 +67,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - relative to absolute imports with aliases
 - updated to React 18 and Next.js latest
 - footer styling update + social media icons
-- improved LightHouse scores by optmizing images, creating a robots.txt file and adding proper alt tags
+- improved LightHouse scores by optimizing images, creating a robots.txt file and adding proper alt tags
 - updated 'about us' first section (our background, peer reviews, version control)
 - updated 'about us' section (our goals, our purpose)
 - updated mobile nav to automatically close when page route change is completed
@@ -89,6 +88,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Search functionality for blog posts
 - Styled components to Title component
 - Links to blog tags to show all posts with the same tag
+- Converting components into styled-components
 
 ### Fixed
 
@@ -97,3 +97,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - adjusted contact form message on mobile
 - blog container and title styling
 - blog card container tags overflowing
+- fix invalid next.config file

components/mailchimp/NewsletterForm/index.js

@@ -2,7 +2,6 @@ import { createRef, useState } from 'react';
 import Image from 'next/image';
 import { decode } from 'html-entities';
 import ReCAPTCHA from 'react-google-recaptcha';
-import Container from '@/components/containers/Container';
 import { NewsLetterSubmitButton } from '@/components/buttons/SubmitButton';
 import S from './styles';
 

components/mailchimp/NewsletterForm/styles.js

@@ -151,7 +151,6 @@ export default {
   InputEmail,
   InputName,
   Input,
-  Form,
   FormError,
   FormInfo,
   FormSending,

next.config.js

@@ -1,12 +1,11 @@
-const withPWA = require('next-pwa');
+const withPWA = require('next-pwa')({
+  dest: 'public',
+  register: true,
+  skipWaiting: true,
+  disable: process.env.NODE_ENV === 'development',
+});
 
 module.exports = withPWA({
-  pwa: {
-    dest: 'public',
-    register: true,
-    skipWaiting: true,
-    disable: process.env.NODE_ENV === 'development',
-  },
   i18n: {
     locales: ['en'],
     defaultLocale: 'en',
@@ -19,26 +18,4 @@ module.exports = withPWA({
       },
     ],
   },
-  compiler: {
-    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
-    styledComponents:
-      true |
-      {
-        // Enabled by default in development, disabled in production to reduce file size,
-        // setting this will override the default for all environments.
-        displayName: true,
-        // Enabled by default.
-        ssr: true,
-        // Enabled by default.
-        fileName: true,
-        // Empty by default.
-        topLevelImportPaths: '',
-        // Defaults to ["index"].
-        meaninglessFileNames: '',
-        // Enabled by default.
-        cssProp: true,
-        // Empty by default.
-        namespace: '',
-      },
-  },
 });

package.json

@@ -22,7 +22,7 @@
     "@sendgrid/mail": "^7.7.0",
     "html-entities": "^2.3.2",
     "next": "^13.1.6",
-    "next-pwa": "^5.5.4",
+    "next-pwa": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^2.1.0",
@@ -33,6 +33,7 @@
     "swiper": "^8.2.2"
   },
   "devDependencies": {
+    "babel-plugin-styled-components": "^2.1.1",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",

styles/pages/contactStyles.js

@@ -67,7 +67,7 @@ const YellowBracket = styled(Bracket)`
   `)}
 
   ${m.desktopBreakpointPlus(css`
-    top: 25%;
+    top: 45%;
     right: 140%;
   `)}
 `;