iaincollins · garmeeh · Aug 31, 2018 · Aug 31, 2018 · Aug 31, 2018
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ node_modules/
 .env
 .DS_Store
 /.env.production
+.history
+yarn.lock
diff --git a/components/layout.js b/components/layout.js
@@ -9,7 +9,7 @@ import Signin from './signin'
 import { NextAuth } from 'next-auth/client'
 import Cookies from 'universal-cookie'
 import Package from '../package'
-import Styles from '../css/index.scss'
+
 
 export default class extends React.Component {
 
@@ -23,7 +23,7 @@ export default class extends React.Component {
       signinBtn: React.PropTypes.boolean
     }
   }
-  
+
   constructor(props) {
     super(props)
     this.state = {
@@ -33,7 +33,7 @@ export default class extends React.Component {
     }
     this.toggleModal = this.toggleModal.bind(this)
   }
-  
+
   async toggleModal(e) {
     if (e) e.preventDefault()
 
@@ -48,17 +48,10 @@ export default class extends React.Component {
       modal: !this.state.modal
     })
   }
-  
+
   render() {
     return (
       <React.Fragment>
-        <Head>
-          <meta charSet="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1"/>
-          <title>{this.props.title || 'Next.js Starter Project'}</title>
-          <style dangerouslySetInnerHTML={{__html: Styles}}/>
-          <script src="https://cdn.polyfill.io/v2/polyfill.min.js"/>
-        </Head>
         <Navbar light className="navbar navbar-expand-md pt-3 pb-3">
           <Link prefetch href="/">
             <NavbarBrand href="/">
@@ -172,15 +165,15 @@ export class UserMenu extends React.Component {
 
    async handleSignoutSubmit(event) {
      event.preventDefault()
-     
+
      // Save current URL so user is redirected back here after signing out
      const cookies = new Cookies()
      cookies.set('redirect_url', window.location.pathname, { path: '/' })
 
      await NextAuth.signout()
      Router.push('/')
    }
-   
+
   render() {
     if (this.props.session && this.props.session.user) {
       // If signed in display user dropdown menu
@@ -254,7 +247,7 @@ export class AdminMenuItem extends React.Component {
 export class SigninModal extends React.Component {
   render() {
     if (this.props.providers === null) return null
-    
+
     return (
       <Modal isOpen={this.props.modal} toggle={this.props.toggleModal} style={{maxWidth: 700}}>
         <ModalHeader>Sign up / Sign in</ModalHeader>

diff --git a/next-seo.config.js b/next-seo.config.js
@@ -0,0 +1,26 @@
+export default {
+  title: 'Next.js Starter Project',
+  description:
+    'A reference and template for React projects. Next.js Starter is built using Next.js and supporting plugins.',
+  openGraph: {
+    type: 'website',
+    locale: 'en_GB',
+    url: 'https://nextjs-starter.now.sh/',
+    title: 'Next.js Starter Project',
+    description:
+      'A reference and template for React projects. Next.js Starter is built using Next.js and supporting plugins.',
+    defaultImageWidth: 1200,
+    defaultImageHeight: 1200,
+    images: [
+      {
+        url: 'https://nextjs-starter.now.sh/static/nextjs-starter.jpg',
+        alt: 'Image containing text: Next.js Starter Project'
+      }
+    ],
+    site_name: 'Next.js Starter'
+  },
+  twitter: {
+    handle: '@iaincollins',
+    cardType: 'summary_large_image'
+  }
+};
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "nedb": "^1.8.0",
     "next": "^6.1.1",
     "next-auth": "^1.9.0",
+    "next-seo": "^1.1.1",
     "node-sass": "^4.9.2",
     "nodemailer": "^4.6.7",
     "nodemailer-direct-transport": "^3.3.2",

diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,40 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import NextSeo from 'next-seo'
+import Head from 'next/head'
+import Styles from '../css/index.scss'
+
+/**
+ * Most of this file is unchanged from next's default.
+ * -> https://github.com/zeit/next.js/#custom-app
+ * Here we import our default SEO configuration
+ */
+import SEO from '../next-seo.config'
+
+export default class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <Head>
+          <meta charSet="UTF-8" key="utf" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
+          <style dangerouslySetInnerHTML={{ __html: Styles }} key="styles" />
+          <script src="https://cdn.polyfill.io/v2/polyfill.min.js" key="polyfill" />
+        </Head>
+        {/* And here we call NextSeo and pass our default configuration to it  */}
+        <NextSeo config={SEO} />
+        <Component {...pageProps} />
+      </Container>
+    )
+  }
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -12,8 +12,7 @@ export default class DefaultDocument extends Document {
     **/
     return (
       <html lang={this.props.__NEXT_DATA__.props.lang || 'en'}>
-        <Head>
-        </Head>
+        <Head />
         <body>
           {this.props.customValue}
           <Main />

diff --git a/pages/examples/async.js b/pages/examples/async.js
@@ -1,6 +1,7 @@
 /* global window */
 import React from 'react'
 import { Row, Col, Nav, NavItem, NavLink } from 'reactstrap'
+import NextSeo from 'next-seo'
 import Page from '../../components/page'
 import Layout from '../../components/layout'
 import AsyncData from '../../components/async-data'
@@ -37,8 +38,8 @@ export default class extends Page {
   // This allows us to render the page on the client without delaying rendering,
   // then load the data fetched via an async call in when we have it.
   async componentDidMount() {
-    // Only render posts client side if they are not populate (if the page was 
-    // rendered on the server, the state will be inherited from the server 
+    // Only render posts client side if they are not populate (if the page was
+    // rendered on the server, the state will be inherited from the server
     // render by the client)
     if (this.state.posts === null) {
       try {
@@ -57,6 +58,15 @@ export default class extends Page {
   render() {
     return (
       <Layout {...this.props}>
+        <NextSeo config={{
+          title: 'Async Data | Next.js Starter',
+          description: 'Example of how to fetch and load data asynchronously so that pages load quickly and with without blocking rendering when possible, but in a way that still works in browsers that do not support JavaScript.',
+          openGraph: {
+            url: 'https://nextjs-starter.now.sh/examples/async',
+            title: 'Async Data | Next.js Starter',
+            description: 'Example of how to fetch and load data asynchronously so that pages load quickly and with without blocking rendering when possible, but in a way that still works in browsers that do not support JavaScript.',
+          }
+        }}/>
         <h1 className="display-2">Async Data</h1>
         <p>
           This page is an example of how to fetch and load data asynchronously

diff --git a/pages/examples/authentication.js b/pages/examples/authentication.js
@@ -1,12 +1,22 @@
 import SyntaxHighlighter from 'react-syntax-highlighter/prism'
 import { atomDark as SyntaxHighlighterTheme } from 'react-syntax-highlighter/styles/prism'
+import NextSeo from 'next-seo'
 import Page from '../../components/page'
 import Layout from '../../components/layout'
 
 export default class extends Page {
   render() {
     return (
       <Layout {...this.props}>
+        <NextSeo config={{
+          title: 'Authentication | Next.js Starter',
+          description: 'Next.js Starter\'s authentication is powered by NextAuth. The NextAuth library uses Express and Passport.',
+          openGraph: {
+            url: 'https://nextjs-starter.now.sh/examples/authentication',
+            title: 'Authentication | Next.js Starter',
+            description: 'Next.js Starter\'s authentication is powered by NextAuth. The NextAuth library uses Express and Passport.',
+          }
+        }}/>
         <h1 className="display-2">Authentication</h1>
         <p className="lead">
           Authentication in this project is handled by the <a href="https://www.npmjs.com/package/next-auth">NextAuth</a> library.
@@ -100,14 +110,14 @@ EMAIL_PASSWORD=`}
             <p>
               It includes configuration examples for Facebook, Google and Twitter
               oAuth, which can easily be copied and replicated to add support
-              for signing in other oAuth providers. For tips on configuring 
+              for signing in other oAuth providers. For tips on configuring
               oAuth see <a href="https://github.com/iaincollins/nextjs-starter/blob/master/AUTHENTICATION.md">AUTHENTICATION.md</a>
             </p>
           </li>
         </ul>
         <h2>Using NextAuth in Pages</h2>
         <p>
-          Pages in this project extend from the <span className="font-weight-bold">Page</span> component 
+          Pages in this project extend from the <span className="font-weight-bold">Page</span> component
           in <a href="https://github.com/iaincollins/nextjs-starter/blob/master/components/page.js">components/page.js</a>.
         </p>
         <p>
@@ -135,7 +145,7 @@ export default class extends React.Component {
           from Express Session by parsing the <span className="font-weight-bold">req</span> object.
         </p>
         <p>
-          If a user is signed in <span className="font-weight-bold">this.session.user</span> will contain 
+          If a user is signed in <span className="font-weight-bold">this.session.user</span> will contain
           a user object. If they are not logged in, it will not be set.
         </p>
         <p>

diff --git a/pages/examples/layout.js b/pages/examples/layout.js
@@ -1,19 +1,29 @@
 import SyntaxHighlighter from 'react-syntax-highlighter/prism'
 import { atomDark as SyntaxHighlighterTheme } from 'react-syntax-highlighter/styles/prism'
+import NextSeo from 'next-seo'
 import Page from '../../components/page'
 import Layout from '../../components/layout'
 
 export default class extends Page {
   render() {
     return (
-      <Layout {...this.props} title="Layout and Styling">
+      <Layout {...this.props}>
+        <NextSeo config={{
+          title: 'Layout | Next.js Starter',
+          description: 'Next.js Starter uses both a custom Page class and a Layout component.',
+          openGraph: {
+            url: 'https://nextjs-starter.now.sh/examples/layout',
+            title: 'Layout | Next.js Starter',
+            description: 'Next.js Starter uses both a custom Page class and a Layout component.',
+          }
+        }}/>
         <h1 className="display-2">Layout</h1>
         <p className="lead">
          This project uses both a custom Page class and a Layout component.
         </p>
         <h2 className="mt-3">Page Class</h2>
         <p>
-          Most Pages in this project extend from the Page class 
+          Most Pages in this project extend from the Page class
           in <a href="https://github.com/iaincollins/nextjs-starter/blob/master/components/page.js">components/page.js</a>,
           which extends from <span className="font-weight-bold">React.Component</span>.
         </p>
@@ -46,13 +56,13 @@ export default class extends React.Component {
         <p>
           <span className="font-weight-bold">getInitialProps()</span> is called
           either client or server side, depending on how the page is being
-          rendered. When rendered server side, additional properties such 
+          rendered. When rendered server side, additional properties such
           as <span className="font-weight-bold">req</span> and <span className="font-weight-bold">res</span> are
           acessible from it.
         </p>
         <h2 className="mt-2">Layout Component</h2>
         <p>
-          Pages in this project inherit common HTML components, such as the 
+          Pages in this project inherit common HTML components, such as the
           top navigation bar, by using the Layout component from  <a href="https://github.com/iaincollins/nextjs-starter/blob/master/components/layout.js">components/layout.js</a> which
           wraps content with common HTML such as the navbar and footer.
         </p>
@@ -71,7 +81,7 @@ import Layout from '../components/layout'
 export default class extends Page {
   render() {
     return (
-      <Layout {...this.props} title="My page title">
+      <Layout {...this.props}>
         <h1>My page name</h1>
         <p>Some text</p>
       </Layout>

diff --git a/pages/examples/routing.js b/pages/examples/routing.js
@@ -2,20 +2,30 @@ import Link from 'next/link'
 import SyntaxHighlighter from 'react-syntax-highlighter/prism'
 import { atomDark as SyntaxHighlighterTheme } from 'react-syntax-highlighter/styles/prism'
 import { Button } from 'reactstrap'
+import NextSeo from 'next-seo'
 import Page from '../../components/page'
 import Layout from '../../components/layout'
 
 export default class extends Page {
-  
+
   static async getInitialProps({req, query}) {
     let props = await super.getInitialProps({req})
     props.slug = query.id
     return props
   }
-  
+
   render() {
     return (
       <Layout {...this.props}>
+        <NextSeo config={{
+          title: 'Routing | Next.js Starter',
+          description: 'Next.js handles routing automatically and is easy to extend.',
+          openGraph: {
+            url: 'https://nextjs-starter.now.sh/examples/routing',
+            title: 'Routing | Next.js Starter',
+            description: 'Next.js handles routing automatically and is easy to extend.',
+          }
+        }}/>
         <h1 className="display-2">Routing</h1>
         <p className="lead">
           Next.js handles routing automatically and is easy to extend.

diff --git a/pages/examples/styling.js b/pages/examples/styling.js
@@ -1,12 +1,22 @@
 import SyntaxHighlighter from 'react-syntax-highlighter/prism'
 import { atomDark as SyntaxHighlighterTheme } from 'react-syntax-highlighter/styles/prism'
+import NextSeo from 'next-seo'
 import Page from '../../components/page'
 import Layout from '../../components/layout'
 
 export default class extends Page {
   render() {
     return (
-      <Layout {...this.props} title="Layout and Styling">
+      <Layout {...this.props}>
+        <NextSeo config={{
+          title: 'Styling | Next.js Starter',
+          description: 'Next.js Starter leverages Bootstrap 4.0, Reactstrap, Ionicons and SASS.',
+          openGraph: {
+            url: 'https://nextjs-starter.now.sh/examples/styling',
+            title: 'Styling | Next.js Starter',
+            description: 'Next.js Starter leverages Bootstrap 4.0, Reactstrap, Ionicons and SASS.',
+          }
+        }}/>
         <h1 className="display-2">Styling</h1>
         <h2>Live Reloading</h2>
         <p>

diff --git a/static/nextjs-starter.jpg b/static/nextjs-starter.jpg