diff --git a/examples/with-analytics/README.md b/examples/with-analytics/README.md
new file mode 100644
index 00000000..ec305fb4
--- /dev/null
+++ b/examples/with-analytics/README.md
@@ -0,0 +1,40 @@
+[![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-analytics)
+
+# Example app with analytics
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example with-analytics with-analytics-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-analytics
+cd with-analytics
+```
+
+Install it and run:
+
+```bash
+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
+
+This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the `
` and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions.
diff --git a/examples/with-analytics/components/Header.js b/examples/with-analytics/components/Header.js
new file mode 100644
index 00000000..d5087b9c
--- /dev/null
+++ b/examples/with-analytics/components/Header.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default () => (
+
+)
diff --git a/examples/with-analytics/package.json b/examples/with-analytics/package.json
new file mode 100644
index 00000000..c98d38dc
--- /dev/null
+++ b/examples/with-analytics/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "with-analytics",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@segment/snippet": "^4.0.1",
+ "next": "latest",
+ "react": "^16.2.0",
+ "react-dom": "^16.2.0"
+ }
+}
diff --git a/examples/with-analytics/pages/_document.js b/examples/with-analytics/pages/_document.js
new file mode 100644
index 00000000..b212c2d1
--- /dev/null
+++ b/examples/with-analytics/pages/_document.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import * as snippet from '@segment/snippet'
+
+const {
+ // This write key is associated with https://segment.com/nextjs-example/sources/nextjs.
+ ANALYTICS_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa',
+ NODE_ENV = 'development'
+} = process.env
+
+export default class extends Document {
+ static getInitialProps ({ renderPage }) {
+ const { html, head, errorHtml, chunks } = renderPage()
+ return { html, head, errorHtml, chunks }
+ }
+
+ renderSnippet () {
+ const opts = {
+ apiKey: ANALYTICS_WRITE_KEY,
+ page: true // Set this to `false` if you want to manually fire `analytics.page()` from within your pages.
+ }
+
+ if (NODE_ENV === 'development') {
+ return snippet.max(opts)
+ }
+
+ return snippet.min(opts)
+ }
+
+ render () {
+ return (
+
+
+ {/* Inject the Segment snippet into the of the document */}
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-analytics/pages/about.js b/examples/with-analytics/pages/about.js
new file mode 100644
index 00000000..89404810
--- /dev/null
+++ b/examples/with-analytics/pages/about.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import Header from '../components/Header'
+
+export default () => (
+
+
+
This is the About page
+
+)
diff --git a/examples/with-analytics/pages/contact.js b/examples/with-analytics/pages/contact.js
new file mode 100644
index 00000000..d2751589
--- /dev/null
+++ b/examples/with-analytics/pages/contact.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import Header from '../components/Header'
+
+export default class extends Component {
+ state = { message: '' }
+
+ render () {
+ return (
+
+
+
This is the Contact page
+
+
+
+
+ )
+ }
+
+ handleInput = e => {
+ this.setState({ message: e.target.value })
+ }
+
+ handleSubmit = e => {
+ e.preventDefault()
+ global.analytics.track('Form Submitted', {
+ message: this.state.message
+ })
+ this.setState({ message: '' })
+ }
+}
diff --git a/examples/with-analytics/pages/index.js b/examples/with-analytics/pages/index.js
new file mode 100644
index 00000000..1b6956aa
--- /dev/null
+++ b/examples/with-analytics/pages/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import Header from '../components/Header'
+
+export default () => (
+
+
+
This is the Home page
+
+)