Merge branch 'canary' into feat/strictPostcssConfiguration

vercel · Jan 11, 2021 · 36ce02b · 36ce02b
2 parents c7fbbe6 + 16ff439
commit 36ce02b
Show file tree

Hide file tree

Showing 66 changed files with 450 additions and 425 deletions.
diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md
@@ -46,6 +46,11 @@ export async function getStaticProps() {
 }
 ```
 
+> **Note**: In order to keep server-only secrets safe, Next.js replaces `process.env.*` with the correct values
+> at build time. This means that `process.env` is not a standard JavaScript object, so you’re not able to
+> use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
+> Environment variables must be referenced as e.g. `process.env.NEXT_PUBLIC_PUBLISHABLE_KEY`, _not_ `const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env`.
+
 > **Note**: Next.js will automatically expand variables (`$VAR`) inside of your `.env*` files.
 > This allows you to reference other secrets, like so:
 >

diff --git a/errors/can-not-output-to-static.md b/errors/can-not-output-to-static.md
@@ -0,0 +1,15 @@
+# Cannot output to /static
+
+#### Why This Error Occurred
+
+Either you set `distDir` to `static` in your `next.config.js` or during `next export` you tried to export to the `static` directory.
+
+This is not allowed due to `static` being a special folder in Next.js used to serve static assets.
+
+#### Possible Ways to Fix It
+
+Use a different `distDir` or export to a different folder.
+
+### Useful Links
+
+- [Static file serving docs](https://nextjs.org/docs/basic-features/static-file-serving)
diff --git a/examples/blog-starter-typescript/package.json b/examples/blog-starter-typescript/package.json
@@ -24,6 +24,8 @@
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "autoprefixer": "^10.2.1",
+    "postcss": "^8.2.4",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^2.0.2"
   },

diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json
@@ -17,10 +17,10 @@
     "remark-html": "13.0.1"
   },
   "devDependencies": {
-    "autoprefixer": "10.0.4",
-    "postcss": "8.1.10",
+    "autoprefixer": "^10.2.1",
+    "postcss": "^8.2.4",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "2.0.1"
+    "tailwindcss": "^2.0.2"
   },
   "license": "MIT"
 }
diff --git a/examples/cms-graphcms/components/avatar.js b/examples/cms-graphcms/components/avatar.js
@@ -1,7 +1,16 @@
+import Image from 'next/image'
+
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
-      <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
+      <div className="w-12 h-12 relative mr-4">
+        <Image
+          src={picture}
+          layout="fill"
+          className="rounded-full"
+          alt={name}
+        />
+      </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
   )

diff --git a/examples/cms-graphcms/components/cover-image.js b/examples/cms-graphcms/components/cover-image.js
@@ -1,9 +1,10 @@
-import cn from 'classnames'
+import Image from 'next/image'
 import Link from 'next/link'
+import cn from 'classnames'
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
-    <img
+    <Image
       width={2000}
       height={1000}
       alt={`Cover Image for ${title}`}

diff --git a/examples/cms-graphcms/components/more-stories.js b/examples/cms-graphcms/components/more-stories.js
@@ -6,7 +6,7 @@ export default function MoreStories({ posts }) {
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
         More Stories
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
+      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
         {posts.map((post) => (
           <PostPreview
             key={post.slug}

diff --git a/examples/cms-graphcms/next.config.js b/examples/cms-graphcms/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['media.graphcms.com'],
+  },
+}
diff --git a/examples/cms-graphcms/package.json b/examples/cms-graphcms/package.json
@@ -7,16 +7,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "autoprefixer": "10.1.0",
     "classnames": "2.2.6",
     "date-fns": "2.10.0",
     "next": "latest",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "postcss": "8.2.2",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "2.0.2"
   },
   "license": "MIT"
 }
diff --git a/examples/with-electron-typescript/README.md b/examples/with-electron-typescript/README.md
@@ -10,8 +10,6 @@ This example show how you can use Next.js inside an Electron application to avoi
 
 For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
 
-**You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
-
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

diff --git a/examples/with-firebase-cloud-messaging/next.config.js b/examples/with-firebase-cloud-messaging/next.config.js
diff --git a/examples/with-firebase-cloud-messaging/package.json b/examples/with-firebase-cloud-messaging/package.json
@@ -2,21 +2,17 @@
   "name": "with-firebase-cloud-messaging",
   "version": "1.0.0",
   "scripts": {
-    "dev": "node server.js",
+    "dev": "next dev",
     "build": "next build",
-    "start": "cross-env NODE_ENV=production node server.js"
+    "start": "next start"
   },
   "dependencies": {
-    "cross-env": "^7.0.2",
-    "express": "^4.14.0",
     "firebase": "^7.6.2",
     "localforage": "^1.7.3",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
-  "devDependencies": {
-    "next-offline": "^3.0.10"
-  },
+  "devDependencies": {},
   "license": "MIT"
 }
diff --git a/...messaging/static/firebase-messaging-sw.js → ...messaging/public/firebase-messaging-sw.js b/...messaging/static/firebase-messaging-sw.js → ...messaging/public/firebase-messaging-sw.js
diff --git a/examples/with-firebase-cloud-messaging/server.js b/examples/with-firebase-cloud-messaging/server.js
diff --git a/examples/with-graphql-hooks/components/app.js b/examples/with-graphql-hooks/components/app.js
@@ -1,44 +1,3 @@
 export default function App({ children }) {
-  return (
-    <main>
-      {children}
-      <style jsx global>{`
-        * {
-          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
-            monospace, serif;
-        }
-        body {
-          margin: 0;
-          padding: 25px 50px;
-        }
-        a {
-          color: #22bad9;
-        }
-        p {
-          font-size: 14px;
-          line-height: 24px;
-        }
-        article {
-          margin: 0 auto;
-          max-width: 650px;
-        }
-        button {
-          align-items: center;
-          background-color: #22bad9;
-          border: 0;
-          color: white;
-          display: flex;
-          padding: 5px 7px;
-        }
-        button:active {
-          background-color: #1b9db7;
-          transition: background-color 0.3s;
-        }
-        button:focus {
-          outline: none;
-        }
-      `}</style>
-    </main>
-  )
+  return <main>{children}</main>
 }
diff --git a/examples/with-graphql-hooks/components/post-list.js b/examples/with-graphql-hooks/components/post-list.js
@@ -4,9 +4,9 @@ import ErrorMessage from './error-message'
 import PostUpvoter from './post-upvoter'
 import Submit from './submit'
 
-export const allPostsQuery = `
+export const ALL_POSTS_QUERY = `
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    allPosts(orderBy: { createdAt: desc }, first: $first, skip: $skip) {
       id
       title
       votes
@@ -32,16 +32,16 @@ export const allPostsQueryOptions = (skip = 0) => ({
 export default function PostList() {
   const [skip, setSkip] = useState(0)
   const { loading, error, data, refetch } = useQuery(
-    allPostsQuery,
+    ALL_POSTS_QUERY,
     allPostsQueryOptions(skip)
   )
 
   if (error) return <ErrorMessage message="Error loading posts." />
   if (!data) return <div>Loading</div>
 
   const { allPosts, _allPostsMeta } = data
-
   const areMorePosts = allPosts.length < _allPostsMeta.count
+
   return (
     <>
       <Submit
@@ -68,51 +68,13 @@ export default function PostList() {
           ))}
         </ul>
         {areMorePosts ? (
-          <button onClick={() => setSkip(skip + 10)}>
+          <button className="more" onClick={() => setSkip(skip + 10)}>
             {' '}
             {loading && !data ? 'Loading...' : 'Show More'}{' '}
           </button>
         ) : (
           ''
         )}
-        <style jsx>{`
-          section {
-            padding-bottom: 20px;
-          }
-          li {
-            display: block;
-            margin-bottom: 10px;
-          }
-          div {
-            align-items: center;
-            display: flex;
-          }
-          a {
-            font-size: 14px;
-            margin-right: 10px;
-            text-decoration: none;
-            padding-bottom: 0;
-            border: 0;
-          }
-          span {
-            font-size: 14px;
-            margin-right: 5px;
-          }
-          ul {
-            margin: 0;
-            padding: 0;
-          }
-          button:before {
-            align-self: center;
-            border-style: solid;
-            border-width: 6px 4px 0 4px;
-            border-color: #ffffff transparent transparent transparent;
-            content: '';
-            height: 0;
-            margin-right: 5px;
-            width: 0;
-          }
-        `}</style>
       </section>
     </>
   )

diff --git a/examples/with-graphql-hooks/components/post-upvoter.js b/examples/with-graphql-hooks/components/post-upvoter.js
@@ -2,11 +2,11 @@ import React from 'react'
 import { useMutation } from 'graphql-hooks'
 
 const UPDATE_POST = `
-  mutation updatePost($id: ID!, $votes: Int) {
-    updatePost(id: $id, votes: $votes) {
+  mutation votePost($id: String!) {
+    votePost(id: $id) {
       id
-      __typename
       votes
+      __typename
     }
   }
 `
@@ -16,12 +16,12 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
 
   return (
     <button
+      className="upvote"
       onClick={async () => {
         try {
           const result = await updatePost({
             variables: {
               id,
-              votes: votes + 1,
             },
           })
 
@@ -32,26 +32,6 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
       }}
     >
       {votes}
-      <style jsx>{`
-        button {
-          background-color: transparent;
-          border: 1px solid #e4e4e4;
-          color: #000;
-        }
-        button:active {
-          background-color: transparent;
-        }
-        button:before {
-          align-self: center;
-          border-color: transparent transparent #000000 transparent;
-          border-style: solid;
-          border-width: 0 4px 6px 4px;
-          content: '';
-          height: 0;
-          margin-right: 5px;
-          width: 0;
-        }
-      `}</style>
     </button>
   )
 }
diff --git a/examples/with-graphql-hooks/lib/graphql-client.js b/examples/with-graphql-hooks/lib/graphql-client.js
@@ -7,7 +7,7 @@ let graphQLClient
 function createClient(initialState) {
   return new GraphQLClient({
     ssrMode: typeof window === 'undefined',
-    url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
+    url: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
     cache: memCache({ initialState }),
   })
 }