🏗️ pattern pages

assets/css/global.scss

@@ -0,0 +1,10 @@
+/*
+    Put some global styles in this file.
+*/
+
+ul {
+    padding: 0;
+    & li {
+        list-style: none;
+    }
+}

components/Header/Header.js

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+import classes from './Header.module.scss'
+
+const Header = () => (
+    <header className={classes.Header}>
+        <ul>
+            <li>
+                <Link href='/'>
+                    <a>Index</a>
+                </Link>
+            </li>
+            <li>
+                <Link href='/about'>
+                    <a>About</a>
+                </Link>
+            </li>
+        </ul>
+    </header>
+)
+
+export default Header

components/Header/Header.module.scss

@@ -0,0 +1,9 @@
+.Header {
+
+    & ul {
+        display: flex;
+        & li {
+            margin-left: 10px;
+        }
+    }
+}

components/Layout/Layout.js

@@ -0,0 +1,14 @@
+import Header from '../Header/Header'
+
+const Layout = props => {
+    return (
+        <>
+            <Header />
+            <main>
+                {props.children}
+            </main>
+        </>
+    )
+}
+
+export default Layout

components/SEO/SEO.js

@@ -0,0 +1,17 @@
+import Head from 'next/head'
+
+/*
+    Put some SEO tags in Head component.
+*/
+
+const SEO = props => {
+    const { pageTitle } = props
+
+    return (
+        <Head>
+            <title>{pageTitle}</title>
+        </Head>
+    )
+}
+
+export default SEO

next.config.js

@@ -0,0 +1,13 @@
+const withSass = require('@zeit/next-sass')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+module.exports = withSass({
+    cssModules: true,
+    webpack: (config, { dev, isServer }) => {
+        if (isServer) return config
+
+        config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}))
+
+        return config
+    }
+})

package.json

@@ -8,7 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "@zeit/next-sass": "^1.0.1",
     "next": "9.2.2",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "react": "16.13.0",
     "react-dom": "16.13.0"
   }

pages/_app.js

@@ -0,0 +1,5 @@
+import '../assets/css/global.scss'
+
+export default function Application({ Component, pageProps }) {
+    return <Component {...pageProps} />
+}

pages/_document.js

@@ -0,0 +1,17 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class CustomDocument extends Document {
+    render() {
+        return (
+            <Html lang='en'>
+                <Head />
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+          )
+    }
+}
+
+export default CustomDocument

pages/about.js

@@ -0,0 +1,13 @@
+import Layout from '../components/Layout/Layout'
+import SEO from '../components/SEO/SEO'
+
+const About = () => (
+  <>
+    <SEO pageTitle='About page' />
+    <Layout>
+      <h1>About page</h1>
+    </Layout>
+  </>
+)
+
+export default About

pages/index.js

@@ -1,203 +1,13 @@
-import Head from 'next/head'
+import Layout from '../components/Layout/Layout'
+import SEO from '../components/SEO/SEO'
 
-const Home = () => (
+const Index = () => (
-  <div className="container">
+  <>
-    <Head>
+    <SEO pageTitle='Index page' />
-      <title>Create Next App</title>
+    <Layout>
-      <link rel="icon" href="/favicon.ico" />
+      <h1>Index page</h1>
-    </Head>
+    </Layout>
-
+  </>
-    <main>
-      <h1 className="title">
-        Welcome to <a href="https://nextjs.org">Next.js!</a>
-      </h1>
-
-      <p className="description">
-        Get started by editing <code>pages/index.js</code>
-      </p>
-
-      <div className="grid">
-        <a href="https://nextjs.org/docs" className="card">
-          <h3>Documentation &rarr;</h3>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a href="https://nextjs.org/learn" className="card">
-          <h3>Learn &rarr;</h3>
-          <p>Learn about Next.js in an interactive course with quizzes!</p>
-        </a>
-
-        <a
-          href="https://github.com/zeit/next.js/tree/master/examples"
-          className="card"
-        >
-          <h3>Examples &rarr;</h3>
-          <p>Discover and deploy boilerplate example Next.js projects.</p>
-        </a>
-
-        <a
-          href="https://zeit.co/new?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          className="card"
-        >
-          <h3>Deploy &rarr;</h3>
-          <p>
-            Instantly deploy your Next.js site to a public URL with ZEIT Now.
-          </p>
-        </a>
-      </div>
-    </main>
-
-    <footer>
-      <a
-        href="https://zeit.co?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Powered by <img src="/zeit.svg" alt="ZEIT Logo" />
-      </a>
-    </footer>
-
-    <style jsx>{`
-      .container {
-        min-height: 100vh;
-        padding: 0 0.5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-
-      main {
-        padding: 5rem 0;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-
-      footer {
-        width: 100%;
-        height: 100px;
-        border-top: 1px solid #eaeaea;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      footer img {
-        margin-left: 0.5rem;
-      }
-
-      footer a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      a {
-        color: inherit;
-        text-decoration: none;
-      }
-
-      .title a {
-        color: #0070f3;
-        text-decoration: none;
-      }
-
-      .title a:hover,
-      .title a:focus,
-      .title a:active {
-        text-decoration: underline;
-      }
-
-      .title {
-        margin: 0;
-        line-height: 1.15;
-        font-size: 4rem;
-      }
-
-      .title,
-      .description {
-        text-align: center;
-      }
-
-      .description {
-        line-height: 1.5;
-        font-size: 1.5rem;
-      }
-
-      code {
-        background: #fafafa;
-        border-radius: 5px;
-        padding: 0.75rem;
-        font-size: 1.1rem;
-        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-      }
-
-      .grid {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-
-        max-width: 800px;
-        margin-top: 3rem;
-      }
-
-      .card {
-        margin: 1rem;
-        flex-basis: 45%;
-        padding: 1.5rem;
-        text-align: left;
-        color: inherit;
-        text-decoration: none;
-        border: 1px solid #eaeaea;
-        border-radius: 10px;
-        transition: color 0.15s ease, border-color 0.15s ease;
-      }
-
-      .card:hover,
-      .card:focus,
-      .card:active {
-        color: #0070f3;
-        border-color: #0070f3;
-      }
-
-      .card h3 {
-        margin: 0 0 1rem 0;
-        font-size: 1.5rem;
-      }
-
-      .card p {
-        margin: 0;
-        font-size: 1.25rem;
-        line-height: 1.5;
-      }
-
-      @media (max-width: 600px) {
-        .grid {
-          width: 100%;
-          flex-direction: column;
-        }
-      }
-    `}</style>
-
-    <style jsx global>{`
-      html,
-      body {
-        padding: 0;
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-          Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-    `}</style>
-  </div>
 )
 
-export default Home
+export default Index