Add next-seo example (#6088)

This PR adds a basic example using [next-seo](https://www.npmjs.com/package/next-seo).

examples/with-next-seo/README.md

@@ -0,0 +1,44 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-next-seo)
+
+# Next SEO example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-next-seo next-seo-app
+# or
+yarn create next-app --example with-next-seo next-seo-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-next-seo
+cd with-next-seo
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Example shows how you integrate [next-seo](https://github.com/garmeeh/next-seo), a plugin to help manage your SEO in Next.js

examples/with-next-seo/next-seo.config.js

@@ -0,0 +1,12 @@
+export default {
+  openGraph: {
+    type: 'website',
+    locale: 'en_IE',
+    site_name: 'SiteName'
+  },
+  twitter: {
+    handle: '@handle',
+    site: '@site',
+    cardType: 'summary_large_image'
+  }
+}

examples/with-next-seo/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-next-seo",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "next-seo": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "ISC"
+}

examples/with-next-seo/pages/_app.js

@@ -0,0 +1,32 @@
+/**
+ * Using a custom _app.js with next-seo you can set default SEO
+ * that will apply to every page. Full info on how the default works
+ * can be found here: https://github.com/garmeeh/next-seo#default-seo-configuration
+ */
+import App, { Container } from 'next/app'
+import React from 'react'
+import NextSeo from 'next-seo'
+
+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>
+        {/* Here we call NextSeo and pass our default configuration to it  */}
+        <NextSeo config={SEO} />
+        <Component {...pageProps} />
+      </Container>
+    )
+  }
+}

examples/with-next-seo/pages/index.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import NextSeo from 'next-seo'
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <NextSeo
+      config={{
+        title: 'Page Meta Title',
+        description: 'This will be the page meta description',
+        canonical: 'https://www.canonicalurl.ie/',
+        openGraph: {
+          url: 'https://www.canonicalurl.ie/',
+          title: 'Open Graph Title',
+          description: 'Open Graph Description',
+          images: [
+            {
+              url: 'https://www.example.ie/og-image-01.jpg',
+              width: 800,
+              height: 600,
+              alt: 'Og Image Alt'
+            },
+            {
+              url: 'https://www.example.ie/og-image-02.jpg',
+              width: 900,
+              height: 800,
+              alt: 'Og Image Alt Second'
+            },
+            { url: 'https://www.example.ie/og-image-03.jpg' },
+            { url: 'https://www.example.ie/og-image-04.jpg' }
+          ]
+        }
+      }}
+    />
+    <h1>SEO Added to Page</h1>
+    <p>Take a look at the head to see what has been added.</p>
+    <p>
+      Or checkout how <Link href='/jsonld'><a>JSON-LD</a></Link> (Structured Data) is added
+    </p>
+  </div>
+)

examples/with-next-seo/pages/jsonld.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { ArticleJsonLd } from 'next-seo'
+
+// See all available JSON-LD here:
+// https://github.com/garmeeh/next-seo#json-ld
+export default () => (
+  <div>
+    <ArticleJsonLd
+      url='https://example.com/article'
+      title='Article headline'
+      images={[
+        'https://example.com/photos/1x1/photo.jpg',
+        'https://example.com/photos/4x3/photo.jpg',
+        'https://example.com/photos/16x9/photo.jpg'
+      ]}
+      datePublished='2015-02-05T08:00:00+08:00'
+      dateModified='2015-02-05T09:00:00+08:00'
+      authorName='Jane Blogs'
+      publisherName='Mary Blogs'
+      publisherLogo='https://www.example.com/photos/logo.jpg'
+      description='This is a mighty good description of this article.'
+    />
+    <h1>JSON-LD Added to Page</h1>
+    <p>
+      Take a look at the head to see what has been added, you are looking for a
+      script tag of type "application/ld+json".
+    </p>
+  </div>
+)