First stab, no graphql config atm

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

.gitignore

@@ -0,0 +1,19 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+/.next
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,234 @@
+This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).
+
+Find the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info.
+
+## Table of Contents
+
+- [Questions? Feedback?](#questions-feedback)
+- [Folder Structure](#folder-structure)
+- [Available Scripts](#available-scripts)
+  - [npm run dev](#npm-run-dev)
+  - [npm run build](#npm-run-build)
+  - [npm run start](#npm-run-start)
+- [Using CSS](#using-css)
+- [Adding Components](#adding-components)
+- [Fetching Data](#fetching-data)
+- [Custom Server](#custom-server)
+- [Syntax Highlighting](#syntax-highlighting)
+- [Using the `static` Folder](#using-the-static-folder)
+- [Deploy to Now](#deploy-to-now)
+- [Something Missing?](#something-missing)
+
+## Questions? Feedback?
+
+Check out [Next.js FAQ & docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback.
+
+## Folder Structure
+
+After creating an app, it should look something like:
+
+```
+.
+├── README.md
+├── components
+│   ├── head.js
+│   └── nav.js
+├── next.config.js
+├── node_modules
+│   ├── [...]
+├── package.json
+├── pages
+│   └── index.js
+├── static
+│   └── favicon.ico
+└── yarn.lock
+```
+
+Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and
+`./pages/about.js` would map to `/about`.
+
+The `./static` directory maps to `/static` in the `next` server, so you can put all your
+other static resources like images or compiled CSS in there.
+
+Out of the box, we get:
+
+- Automatic transpilation and bundling (with webpack and babel)
+- Hot code reloading
+- Server rendering and indexing of `./pages`
+- Static file serving. `./static/` is mapped to `/static/`
+
+Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `.next` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+### `npm run start`
+
+Starts the application in production mode.
+The application should be compiled with \`next build\` first.
+
+See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
+
+## Using CSS
+
+[`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
+
+```jsx
+export default () => (
+  <div>
+    Hello world
+    <p>scoped!</p>
+    <style jsx>{`
+      p {
+        color: blue;
+      }
+      div {
+        background: red;
+      }
+      @media (max-width: 600px) {
+        div {
+          background: blue;
+        }
+      }
+    `}</style>
+  </div>
+)
+```
+
+Read more about [Next's CSS features](https://github.com/zeit/next.js#css).
+
+## Adding Components
+
+We recommend keeping React components in `./components` and they should look like:
+
+### `./components/simple.js`
+
+```jsx
+const Simple = () => <div>Simple Component</div>
+
+export default Simple // don't forget to export default!
+```
+
+### `./components/complex.js`
+
+```jsx
+import { Component } from 'react'
+
+class Complex extends Component {
+  state = {
+    text: 'World'
+  }
+
+  render() {
+    const { text } = this.state
+    return <div>Hello {text}</div>
+  }
+}
+
+export default Complex // don't forget to export default!
+```
+
+## Fetching Data
+
+You can fetch data in `pages` components using `getInitialProps` like this:
+
+### `./pages/stars.js`
+
+```jsx
+const Page = props => <div>Next stars: {props.stars}</div>
+
+Page.getInitialProps = async ({ req }) => {
+  const res = await fetch('https://api.github.com/repos/zeit/next.js')
+  const json = await res.json()
+  const stars = json.stargazers_count
+  return { stars }
+}
+
+export default Page
+```
+
+For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs.
+
+_Note: `getInitialProps` can **not** be used in children components. Only in `pages`._
+
+Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)
+
+## Custom Server
+
+Want to start a new app with a custom server? Run `create-next-app --example customer-server custom-app`
+
+Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc
+
+This example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`:
+
+```jsx
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  createServer((req, res) => {
+    // Be sure to pass `true` as the second argument to `url.parse`.
+    // This tells it to parse the query portion of the URL.
+    const parsedUrl = parse(req.url, true)
+    const { pathname, query } = parsedUrl
+
+    if (pathname === '/a') {
+      app.render(req, res, '/b', query)
+    } else if (pathname === '/b') {
+      app.render(req, res, '/a', query)
+    } else {
+      handle(req, res, parsedUrl)
+    }
+  }).listen(3000, err => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})
+```
+
+Then, change your `start` script to `NODE_ENV=production node server.js`.
+
+Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing)
+
+## Syntax Highlighting
+
+To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
+
+## Deploy to Now
+
+[now](https://zeit.co/now) offers a zero-configuration single-command deployment.
+
+1.  Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.
+
+2.  Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
+
+    ```
+    > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
+    ```
+
+    Paste that URL into your browser when the build is complete, and you will see your deployed app.
+
+You can find more details about [`now` here](https://zeit.co/now).
+
+## Something Missing?
+
+If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md)

components/head.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import NextHead from 'next/head'
+import { string } from 'prop-types'
+
+const defaultDescription = ''
+const defaultOGURL = ''
+const defaultOGImage = ''
+
+const Head = props => (
+  <NextHead>
+    <meta charSet="UTF-8" />
+    <title>{props.title || ''}</title>
+    <meta
+      name="description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
+    <link rel="apple-touch-icon" href="/static/touch-icon.png" />
+    <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
+    <link rel="icon" href="/static/favicon.ico" />
+    <meta property="og:url" content={props.url || defaultOGURL} />
+    <meta property="og:title" content={props.title || ''} />
+    <meta
+      property="og:description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="twitter:site" content={props.url || defaultOGURL} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+  </NextHead>
+)
+
+Head.propTypes = {
+  title: string,
+  description: string,
+  url: string,
+  ogImage: string
+}
+
+export default Head

components/input.js

@@ -0,0 +1,39 @@
+class Input extends React.Component {
+  constructor(props) {
+    super(props)
+    const {type, label, ...options} = props;
+    this.options = options;
+  }
+
+  labelize = () => {
+    const spacedLabel  = this.props.label.split(/(?=[A-Z])/).join(' ')
+    const finalLabel = spacedLabel.charAt(0).toUpperCase() + spacedLabel.slice(1)
+    return finalLabel
+  }
+
+  formType = () => {
+    const options = this.options
+    switch(this.props.type) {
+      case 'textarea':
+        return <textarea id={this.props.label} {...options} />
+      default:
+        return <input id={this.props.label} type={this.props.type} {...options} />
+    }
+  }
+
+  render() {
+    const label = this.props.label
+    const type = this.props.type
+    return (
+      <fragment>
+        { label ?
+            <label title={this.options.hint} htmlFor={label}>{this.labelize()}</label>
+            : null
+        }
+        {this.formType()}
+      </fragment>
+    )
+  }
+}
+
+export default Input