diff --git a/examples/with-next-seo/README.md b/examples/with-next-seo/README.md new file mode 100644 index 00000000..f6960df7 --- /dev/null +++ b/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 diff --git a/examples/with-next-seo/next-seo.config.js b/examples/with-next-seo/next-seo.config.js new file mode 100644 index 00000000..bf67f54d --- /dev/null +++ b/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' + } +} diff --git a/examples/with-next-seo/package.json b/examples/with-next-seo/package.json new file mode 100644 index 00000000..5b2d1864 --- /dev/null +++ b/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" +} diff --git a/examples/with-next-seo/pages/_app.js b/examples/with-next-seo/pages/_app.js new file mode 100644 index 00000000..99268161 --- /dev/null +++ b/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 ( + + {/* Here we call NextSeo and pass our default configuration to it */} + + + + ) + } +} diff --git a/examples/with-next-seo/pages/index.js b/examples/with-next-seo/pages/index.js new file mode 100644 index 00000000..4ad74b4d --- /dev/null +++ b/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 () => ( +
+ +

SEO Added to Page

+

Take a look at the head to see what has been added.

+

+ Or checkout how JSON-LD (Structured Data) is added +

+
+) diff --git a/examples/with-next-seo/pages/jsonld.js b/examples/with-next-seo/pages/jsonld.js new file mode 100644 index 00000000..c78c8e4e --- /dev/null +++ b/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 () => ( +
+ +

JSON-LD Added to Page

+

+ Take a look at the head to see what has been added, you are looking for a + script tag of type "application/ld+json". +

+
+)