Merge branch 'canary' into fix/api-not-ending

vercel · Jan 10, 2020 · 58a05e0 · 58a05e0
2 parents fe758cb + dd020fb
commit 58a05e0
Show file tree

Hide file tree

Showing 113 changed files with 707 additions and 749 deletions.
diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md
@@ -83,7 +83,7 @@ Data is always up-to-date but it comes at the cost of a slightly higher [Time to
 // Next.js will execute `getInitialProps`
 // It will wait for the result of `getInitialProps`
 // When the results comes back Next.js will render the page.
-// Next.js wil do this for every request that comes in.
+// Next.js will do this for every request that comes in.
 import fetch from 'isomorphic-unfetch'
 
 function HomePage({ stars }) {

diff --git a/docs/basic-features/static-file-serving.md b/docs/basic-features/static-file-serving.md
@@ -18,4 +18,4 @@ export default MyImage
 
 > Don't name the `public` directory anything else. The name can't be changed and is the only directory that **Next.js** uses to serve static assets.
 
-> If you ever add a static asset that conflicts with the name of a `page`, the public file will be ignored in favor of the `page`.
+> If you ever add a static asset that conflicts with the name of a page in the `pages` directory, the public file will be ignored in favor of the file in `pages`.
diff --git a/docs/deployment.md b/docs/deployment.md
@@ -66,13 +66,13 @@ You can link your project in [GitHub](https://zeit.co/new), [GitLab](https://zei
 
 You can install the command line tool using npm:
 
-```
+```bash
 npm install -g now
 ```
 
 You can deploy your application by running the following command in the root of the project directory:
 
-```
+```bash
 now
 ```
 

diff --git a/errors/css-global.md b/errors/css-global.md
@@ -0,0 +1,22 @@
+# Global CSS Must Be in Your Custom \<App\>
+
+#### Why This Error Occurred
+
+An attempt to import Global CSS from a file other than [`pages/_app.js`](https://nextjs.org/docs/advanced-features/custom-app) was made.
+
+Global CSS cannot be used in files other than your [Custom `<App>`](https://nextjs.org/docs/advanced-features/custom-app) due to its side-effects and ordering problems.
+
+#### Possible Ways to Fix It
+
+Relocate all Global CSS imports to your [`pages/_app.js` file](https://nextjs.org/docs/advanced-features/custom-app).
+
+#### Example
+
+```jsx
+// pages/_app.js
+import '../styles.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
diff --git a/errors/css-npm.md b/errors/css-npm.md
@@ -0,0 +1,27 @@
+# CSS Imported by a Dependency
+
+#### Why This Error Occurred
+
+One of your dependencies (`node_modules`) imports a CSS file.
+
+This normally happens when a package's source files are accidentally consumed,
+instead of the built package.
+
+#### Possible Ways to Fix It
+
+Reach out to the maintainer and ask for them to publish a compiled version of
+their dependency.
+
+Compiled dependencies do not have references to CSS files, or any other files
+that require bundler-specific integrations.
+
+The dependency should also provide instructions about what CSS needs to be
+imported by you, in your application.
+
+Importing CSS files within `node_modules` cannot be supported because we cannot
+know the correct behavior:
+
+- Should the file be consumed as Global CSS or CSS Modules?
+- If Global, in what order does the file need to be injected?
+- If Modules, what are the emitted class names? As-is, camel-case, snake case?
+- Etc...
diff --git a/errors/global-css.md b/errors/global-css.md
diff --git a/examples/blog-starter/components/syntax-highlight.css b/examples/blog-starter/components/syntax-highlight.css
diff --git a/examples/blog-starter/next.config.js b/examples/blog-starter/next.config.js
@@ -15,28 +15,14 @@ module.exports = withMDX({
       module: 'empty',
     }
 
-    config.module.rules.push(
-      {
-        test: /\.css$/,
-        use: [
-          defaultLoaders.babel,
-          {
-            loader: require('styled-jsx/webpack').loader,
-            options: {
-              type: 'global',
-            },
-          },
-        ],
-      },
-      {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-          },
-        ],
-      }
-    )
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+        },
+      ],
+    })
 
     if (isServer && !dev) {
       const originalEntry = config.entry

diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json
@@ -7,7 +7,6 @@
     "now-build": "next build && yarn build:rss"
   },
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
     "babel-plugin-macros": "^2.5.0",
     "babel-plugin-preval": "^3.0.1",

diff --git a/examples/with-cookie-auth/components/header.js b/examples/with-cookie-auth/components/header.js
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { logout } from '../utils/auth'
 
-const Header = props => (
+const Header = () => (
   <header>
     <nav>
       <ul>

diff --git a/examples/with-cookie-auth/components/layout.js b/examples/with-cookie-auth/components/layout.js
@@ -3,7 +3,7 @@ import Head from 'next/head'
 import Header from './header'
 
 const Layout = props => (
-  <React.Fragment>
+  <>
     <Head>
       <title>With Cookies</title>
     </Head>
@@ -34,7 +34,7 @@ const Layout = props => (
     <main>
       <div className="container">{props.children}</div>
     </main>
-  </React.Fragment>
+  </>
 )
 
 export default Layout
diff --git a/examples/with-cookie-auth/next.config.js b/examples/with-cookie-auth/next.config.js
diff --git a/examples/with-cookie-auth/package.json b/examples/with-cookie-auth/package.json
@@ -6,11 +6,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "^3.0.0",
-    "js-cookie": "^2.2.0",
-    "next": "^9.0.1",
-    "next-cookies": "^1.0.4",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "isomorphic-unfetch": "latest",
+    "js-cookie": "latest",
+    "next": "latest",
+    "next-cookies": "latest",
+    "react": "latest",
+    "react-dom": "latest"
   }
 }
diff --git a/examples/with-cookie-auth/pages/login.js b/examples/with-cookie-auth/pages/login.js
@@ -3,10 +3,10 @@ import fetch from 'isomorphic-unfetch'
 import Layout from '../components/layout'
 import { login } from '../utils/auth'
 
-function Login() {
+const Login = () => {
   const [userData, setUserData] = useState({ username: '', error: '' })
 
-  async function handleSubmit(event) {
+  const handleSubmit = async event => {
     event.preventDefault()
     setUserData(Object.assign({}, userData, { error: '' }))
 

diff --git a/examples/with-external-scoped-css/README.md b/examples/with-external-scoped-css/README.md
diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md
@@ -30,16 +30,13 @@ Install it and run:
 ```bash
 npm install
 npm run dev
-# or
-yarn
-yarn dev
 ```
 
 **yarn**
 
 ```bash
-npm install
-npm run dev
+yarn
+yarn dev
 ```
 
 Deploy it to the cloud with [now](https://zeit.co/now)

diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md
@@ -45,4 +45,4 @@ now
 
 ## The idea behind the example
 
-This example demonstrates how to use the [next-css plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-css) It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-css plugin.
+This example demonstrates how to use Next.js' built-in CSS imports and CSS modules support.
diff --git a/examples/with-next-css/component/hello-world.js b/examples/with-next-css/component/hello-world.js
@@ -0,0 +1,7 @@
+import css from './hello-world.module.css'
+
+export default () => (
+  <div className={css.hello}>
+    Hello World, I am being styled using CSS Modules!
+  </div>
+)
diff --git a/examples/with-next-css/component/hello-world.module.css b/examples/with-next-css/component/hello-world.module.css
@@ -0,0 +1,3 @@
+.hello {
+  font-size: 25px;
+}