Updated README with new features and code fixes (#444)

impronunciable · rauchg · commit bacb42ead49a · 2016-12-20T14:57:11.000-08:00
* Updated README with new features and code fixes

* Removed staticMarkup option from docs.

* Fixed quiet parameter info.
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ It's possible to use any existing CSS-in-JS solution. The simplest one is inline
 
 ```jsx
 export default () => (
-  <p style={{ color: red }}>hi there</p>
+  <p style={{ color: 'red' }}>hi there</p>
 )
 ```
 
@@ -264,13 +264,15 @@ Most needs are addressed by `<Link />`, but we also expose an imperative API for
 ```jsx
 import { prefetch } from 'next/prefetch'
 export default ({ url }) => (
-  <a onClick={ () => setTimeout(() => url.pushTo('/dynamic'), 100) }>
-    A route transition will happen after 100ms
-  </a>
-  {
-    // but we can prefetch it!
-    prefetch('/dynamic')
-  }
+  <div>
+    <a onClick={ () => setTimeout(() => url.pushTo('/dynamic'), 100) }>
+      A route transition will happen after 100ms
+    </a>
+    {
+      // but we can prefetch it!
+      prefetch('/dynamic')
+    }
+  </div>
 )
 ```
 
@@ -308,11 +310,13 @@ app.prepare().then(() => {
 ```
 
 The `next` API is as follows:
-- `next(path: string, opts: objecvt)` - `path` is where the Next project is located
+- `next(path: string, opts: objecvt)` - `path` is 
 - `next(opts: object)`
 
 Supported options:
-- `dev` (`bool`) whether to launch Next.js in dev mode
+- `dev` (`bool`) whether to launch Next.js in dev mode - default `false`
+- `dir` (`string`) where the Next project is located - default `'.'`
+- `quiet` (`bool`) Display error messages with server information - default `false`
 
 ### Custom `<Document>`
 
@@ -441,11 +445,8 @@ Note: we recommend putting `.next` in `.npmignore` or `.gitignore`. Otherwise, u
 <details>
   <summary>How big is it?</summary>
 
-The client side next bundle, which includes React and Glamor is **73kb** gzipped.
-
-The Next runtime (lazy loading, routing, `<Head>`) contributes around **15%** to the size of that bundle.
-
-The codebase is ~1500LOC (excluding CLI programs).
+The client side bundle size should be measured in a per-app basis.
+A small Next main bundle is around 65kb gzipped.
 
 </details>
 
@@ -470,15 +471,10 @@ If you want to create re-usable React components that you can embed in your Next
 </details>
 
 <details>
-  <summary>Why CSS-in-JS?</summary>
-
-`next/css` is powered by [Glamor](https://github.com/threepointone/glamor). While it exposes a JavaScript API, it produces regular CSS and therefore important features like `:hover`, animations, media queries all work.
-
-There’s *no tradeoff* in power. Instead, we gain the power of simpler composition and usage of JavaScript expressions.
+  <summary>How do I use CSS-in-JS solutions</summary>
 
-*Compiling* regular CSS files would be counter-productive to some of our goals. Some of these are listed below.
+Next.js bundles [styled-jsx](https://github.com/zeit/styled-jsx) supporting scoped css. However you can use a CSS-in-JS solution in your Next app by just including your favorite library [as mentioned before](#css-in-js) in the document.
 
-**Please note**: we are very interested in supporting regular CSS, since it's so much easier to write and already familiar. To that end, we're currently exploring the possibility of leveraging Shadow DOM to avoid the entire CSS parsing and mangling step [[#22](https://github.com/zeit/next.js/issues/22)]
 
 ### Compilation performance
 
@@ -538,9 +534,9 @@ We tested the flexibility of the routing with some interesting scenarios. For an
 <details>
 <summary>How do I define a custom fancy route?</summary>
 
-We’re adding the ability to map between an arbitrary URL and any component by supplying a request handler: [#25](https://github.com/zeit/next.js/issues/25)
+We [added](#custom-server-and-routing) the ability to map between an arbitrary URL and any component by supplying a request handler.
 
-On the client side, we'll add a parameter to `<Link>` so that it _decorates_ the URL differently from the URL it _fetches_.
+On the client side, we have a parameter call `as` on `<Link>` that _decorates_ the URL differently from the URL it _fetches_.
 </details>
 
 <details>
diff --git a/examples/with-prefetching/components/Header.js b/examples/with-prefetching/components/Header.js
@@ -14,7 +14,7 @@ export default () => (
 
     { /* we imperatively prefetch on hover */ }
     <RegularLink href='/about'>
-      <a onMouseEnter={ () => prefetch('/about') && console.log('prefetching /about!') }>About</a>
+      <a onMouseEnter={() => prefetch('/about') && console.log('prefetching /about!')}>About</a>
     </RegularLink>
 
     <Link href='/contact' prefetch={false}>
