Merge branch 'canary' of github.com:zeit/next.js into polyfill-fetch

.circleci/config.yml

@@ -41,6 +41,16 @@ commands:
       - run:
           name: Linting
           command: yarn lint
+  yarn_react_integration:
+    steps:
+      - run:
+          name: Upgrade to most recent release in React's Next channel
+          command: yarn upgrade react@next react-dom@next -W --dev # upgrade (vs add) will skip re-building Next.js, which doesn't bundle React internals (so this is OK!)
+  yarn_info:
+    steps:
+      - run:
+          name: React Versions
+          command: yarn why react && yarn why react-dom
   test_all:
     steps:
       - run:
@@ -114,11 +124,18 @@ jobs:
       - yarn_install
       - yarn_lint
       - *persist_to_workspace
+  build-react-canary:
+    executor: node
+    steps:
+      - *attach_workspace
+      - yarn_react_integration
+      - *persist_to_workspace
   test:
     parallelism: 3
     executor: node
     steps:
       - *attach_workspace
+      - yarn_info
       - test_all
       - *store_test_results
   test-ie11:
@@ -196,3 +213,19 @@ workflows:
               only:
                 - master
                 - canary
+  q12h-react-canary:
+    triggers:
+      - schedule:
+          cron: '0 0,12 * * *'
+          filters:
+            branches:
+              only:
+                - canary
+    jobs:
+      - build
+      - build-react-canary:
+          requires:
+            - build
+      - test:
+          requires:
+            - build-react-canary

errors/no-cache.md

@@ -0,0 +1,76 @@
+# No Cache Detected
+
+#### Why This Error Occurred
+
+A Next.js build was triggered in a continuous integration environment, but no cache was detected.
+
+This results in slower builds and can hurt Next.js' persistent caching of client-side bundles across builds.
+
+#### Possible Ways to Fix It
+
+> **Note**: If this is a new project, or being built for the first time in your CI, you can ignore this error.
+> However, you'll want to make sure it doesn't continue to happen and fix it if it does!
+
+Configure Next.js' cache to be persisted across builds. Next.js stores its cache in the `.next/cache` directory.
+
+Storing this folder across builds varies by CI provider. We've provided a list of a few common providers below.
+
+**ZEIT Now**
+
+Next.js caching is automatically configured for you. There's no action required on your part.
+
+**CircleCI**
+
+Edit your `save_cache` step in `.circleci/config.yml` to include `.next/cache`:
+
+```yaml
+steps:
+  - save_cache:
+      key: dependency-cache-{{ checksum "yarn.lock" }}
+      paths:
+        - ./node_modules
+        - ./.next/cache
+```
+
+If you do not have a `save_cache` key, please follow CircleCI's [documentation on setting up build caching](https://circleci.com/docs/2.0/caching/).
+
+**Travis CI**
+
+Add or merge the following into your `.travis.yml`:
+
+```yaml
+cache:
+  directories:
+    - $HOME/.cache/yarn
+    - node_modules
+    - .next/cache
+```
+
+**GitLab CI**
+
+Add or merge the following into your `.gitlab-ci.yml`:
+
+```yaml
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+    - .next/cache/
+```
+
+**Netlify CI**
+
+It is **not possible** to cache custom build files on Netlify. Please contact their support and request they support this behavior.
+
+You can investigate using a 3rd party solution (e.g. [`cache-me-outside`](https://github.com/DavidWells/cache-me-outside)) to manually cache the Next.js output.
+
+**AWS CodeBuild**
+
+Add (or merge in) the following to your `buildspec.yml`:
+
+```yaml
+cache:
+  paths:
+    - 'node_modules/**/*' # Cache `node_modules` for faster `yarn` or `npm i`
+    - '.next/cache/**/*' # Cache Next.js for faster application rebuilds
+```

examples/api-routes-apollo-server-and-client/pages/api/graphql.js

@@ -1,8 +1,7 @@
 import { ApolloServer } from 'apollo-server-micro'
-import { typeDefs } from '../../apollo/type-defs'
-import { resolvers } from '../../apollo/resolvers'
+import { schema } from '../../apollo/schema'
 
-const apolloServer = new ApolloServer({ typeDefs, resolvers })
+const apolloServer = new ApolloServer({ schema })
 
 export const config = {
   api: {

examples/with-context-api/README.md

@@ -43,8 +43,8 @@ This example shows how to use react context api in our app.
 
 It provides an example of using `pages/_app.js` to include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
 
-The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+We start of by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
 
-The `pages/about.js` shows how to, from the about page, how to pass an increment value from the about page into the context provider itself.
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
 
-\*_Based on WesBos example_.
+The `pages/about.js` shows how to pass an increment value from the about page into the context provider itself.

examples/with-context-api/components/Counter.js

@@ -0,0 +1,31 @@
+import React, { useReducer, useContext } from 'react'
+
+const CounterStateContext = React.createContext()
+const CounterDispatchContext = React.createContext()
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'INCREASE':
+      return state + 1
+    case 'DECREASE':
+      return state - 1
+    case 'INCREASE_BY':
+      return state + action.payload
+    default:
+      throw new Error(`Unkown action: ${action.type}`)
+  }
+}
+
+export const CounterProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, 0)
+  return (
+    <CounterDispatchContext.Provider value={dispatch}>
+      <CounterStateContext.Provider value={state}>
+        {children}
+      </CounterStateContext.Provider>
+    </CounterDispatchContext.Provider>
+  )
+}
+
+export const useCount = () => useContext(CounterStateContext)
+export const useDispatchCount = () => useContext(CounterDispatchContext)

examples/with-context-api/pages/_app.js

@@ -1,12 +1,10 @@
 import App from 'next/app'
-/* First we import our provider */
-import CounterProvider from '../components/CounterProvider'
+import { CounterProvider } from '../components/Counter'
 
 class MyApp extends App {
   render () {
     const { Component, pageProps } = this.props
     return (
-      /* Then we wrap our components with the provider */
       <CounterProvider>
         <Component {...pageProps} />
       </CounterProvider>

examples/with-context-api/pages/about.js

@@ -1,33 +1,34 @@
-import React, { Component } from 'react'
-/* First we import the consumer */
-import { CounterConsumer } from '../components/CounterProvider'
+import React from 'react'
 import Link from 'next/link'
+import { useCount, useDispatchCount } from '../components/Counter'
 
-export default class about extends Component {
-  render () {
-    return (
-      /* Then we use our context through render props */
-      <CounterConsumer>
-        {({ count, increase, increaseBy }) => (
-          <div>
-            <h1>ABOUT</h1>
-            <p>Counter: {count}</p>
-            <button onClick={increase}>Increase</button>
-            <button
-              onClick={() => {
-                increaseBy(15)
-              }}
-            >
-              Increase By 15
-            </button>
-            <p>
-              <Link href='/'>
-                <a>Home</a>
-              </Link>
-            </p>
-          </div>
-        )}
-      </CounterConsumer>
-    )
-  }
+const AboutPage = () => {
+  const count = useCount()
+  const dispatch = useDispatchCount()
+
+  const handleIncrease = event =>
+    dispatch({
+      type: 'INCREASE'
+    })
+  const handleIncrease15 = event =>
+    dispatch({
+      type: 'INCREASE_BY',
+      payload: 15
+    })
+
+  return (
+    <>
+      <h1>ABOUT</h1>
+      <p>Counter: {count}</p>
+      <button onClick={handleIncrease}>Increase</button>
+      <button onClick={handleIncrease15}>Increase By 15</button>
+      <p>
+        <Link href='/'>
+          <a>Home</a>
+        </Link>
+      </p>
+    </>
+  )
 }
+
+export default AboutPage

examples/with-context-api/pages/index.js

@@ -1,27 +1,33 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Link from 'next/link'
-/* First we import the consumer */
-import { CounterConsumer } from '../components/CounterProvider'
+import { useCount, useDispatchCount } from '../components/Counter'
 
-export default class index extends Component {
-  render () {
-    return (
-      /* Then we use our context through render props */
-      <CounterConsumer>
-        {({ count, increase, decrease }) => (
-          <div>
-            <h1>HOME</h1>
-            <p>Counter: {count}</p>
-            <button onClick={increase}>Increase</button>
-            <button onClick={decrease}>Decrease</button>
-            <p>
-              <Link href='/about'>
-                <a>About</a>
-              </Link>
-            </p>
-          </div>
-        )}
-      </CounterConsumer>
-    )
-  }
+const IndexPage = () => {
+  const count = useCount()
+  const dispatch = useDispatchCount()
+
+  const handleIncrease = event =>
+    dispatch({
+      type: 'INCREASE'
+    })
+  const handleDecrease = event =>
+    dispatch({
+      type: 'DECREASE'
+    })
+
+  return (
+    <>
+      <h1>HOME</h1>
+      <p>Counter: {count}</p>
+      <button onClick={handleIncrease}>Increase</button>
+      <button onClick={handleDecrease}>Decrease</button>
+      <p>
+        <Link href='/about'>
+          <a>About</a>
+        </Link>
+      </p>
+    </>
+  )
 }
+
+export default IndexPage

examples/with-netlify-cms/components/layout.js

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+
+const Layout = ({ children }) => (
+  <>
+    <nav>
+      <Link href='/'>
+        <a>home</a>
+      </Link>
+      <Link href='/blog'>
+        <a>blog</a>
+      </Link>
+      <Link href='/about'>
+        <a>about</a>
+      </Link>
+    </nav>
+    <main>{children}</main>
+    <style jsx>{`
+      nav {
+        text-align: center;
+      }
+      nav a {
+        margin-right: 2px;
+        padding: 4px;
+      }
+      main {
+        display: flex;
+        flex-direction: column;
+      }
+    `}</style>
+  </>
+)
+
+export default Layout