🐛CSS&&ERR429

noeypatt · Mar 27, 2020 · d599eef · d599eef · vercel · Mar 27, 2020
1 parent e774521
commit d599eef
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 66 deletions.
diff --git a/components/about.js b/components/about.js
@@ -39,7 +39,7 @@ const About = () => {
                                 <div className="data-detail-content">
                                     {
                                         data.map((item, index) => (
-                                            <div className="title-content">
+                                            <div className="title-content" key={index}>
                                                 <h6 className="header-title-content">{item.title}</h6>
                                                 <h6>{item.text}</h6>
                                                 <h6>{item.subtext}</h6>
@@ -61,7 +61,7 @@ const About = () => {
                                 <div className="data-detail-content">
                                     {
                                         data.map((item, index) => (
-                                            <div className="title-content">
+                                            <div className="title-content" key={index}>
                                                 <h6 className="header-title-content">{item.title}</h6>
                                                 <h6>{item.text}</h6>
                                                 <h6>{item.subtext}</h6>

diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,8 @@
 const withLess = require('@zeit/next-less')
 const withSass = require('@zeit/next-sass')
-module.exports = withLess(withSass({
+const withCSS = require('@zeit/next-css')
+module.exports = withCSS(withLess(withSass({
     lessLoaderOptions: {
         javascriptEnabled: true
     }
-}))
+}))) 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@material-ui/core": "^4.9.4",
     "@material-ui/icons": "^4.9.1",
+    "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
     "@zeit/next-sass": "^1.0.1",
     "animate.css": "^3.7.2",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,26 +1,8 @@
 import React from 'react'
-import App from 'next/app'
 import '../styles/base.scss'
 import 'antd/dist/antd.less'
 
-class MyApp extends App {
-
-  // Only uncomment this method if you have blocking data requirements for
-  // every single page in your application. This disables the ability to
-  // perform automatic static optimization, causing every page in your app to
-  // be server-side rendered.
-
-  // static async getInitialProps(appContext) {
-  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
-  //   const appProps = await App.getInitialProps(appContext);
-
-  //   return { ...appProps }
-  // }
-
-  render() {
-    const { Component, pageProps } = this.props
-    return <Component {...pageProps} />
-  }
-}
-
-export default MyApp
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/pages/index.js b/pages/index.js
@@ -1,14 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
+import dynamic from 'next/dynamic';
 import Cover from '../components/cover';
 import NavBar from '../components/layout/nav';
 import { useMediaQuery } from 'react-responsive';
 import About from '../components/about';
-import Info from '../components/info';
 import Footer from '../components/footer';
 import Agency from '../components/agency';
 
 
+const Info = dynamic(
+  () => import('../components/info'),
+  { ssr: false }
+)
+
 const Home = () => {
   const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
 
@@ -37,20 +42,27 @@ const Home = () => {
   }
 
   return (
-    <div className="warp-index">
-      <Head>
-        <title>Eldery DB</title>
-        <link rel='icon' href='/static/logomain.svg' />
-      </Head>
-      <React.Fragment>
-        <NavBar name="index" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
-        <Cover />
-        <About />
-        <Agency />
-        <Info />
-        <Footer />
-      </React.Fragment>
-    </div>
+    <React.Fragment>
+      {
+        typeof document === 'undefined' ?
+          null :
+          <div className="warp-index">
+            <Head>
+              <title>Eldery DB</title>
+              <link rel='icon' href='/static/logomain.svg' />
+            </Head>
+            <React.Fragment>
+              <NavBar name="index" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
+              <Cover />
+              <About />
+              <Agency />
+              <Info />
+              <Footer />
+            </React.Fragment>
+          </div>
+      }
+    </React.Fragment>
+
   )
 }
 export default Home;