diff --git a/README.md b/README.md index ad9b4c2e..8197173f 100644 --- 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 () => ( -

hi there

+

hi there

) ``` @@ -264,13 +264,15 @@ Most needs are addressed by ``, but we also expose an imperative API for ```jsx import { prefetch } from 'next/prefetch' export default ({ url }) => ( - setTimeout(() => url.pushTo('/dynamic'), 100) }> - A route transition will happen after 100ms - - { - // but we can prefetch it! - prefetch('/dynamic') - } +
+ setTimeout(() => url.pushTo('/dynamic'), 100) }> + A route transition will happen after 100ms + + { + // but we can prefetch it! + prefetch('/dynamic') + } +
) ``` @@ -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 `` @@ -441,11 +445,8 @@ Note: we recommend putting `.next` in `.npmignore` or `.gitignore`. Otherwise, u
How big is it? -The client side next bundle, which includes React and Glamor is **73kb** gzipped. - -The Next runtime (lazy loading, routing, ``) 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.
@@ -470,15 +471,10 @@ If you want to create re-usable React components that you can embed in your Next
- Why CSS-in-JS? + How do I use CSS-in-JS solutions -`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. +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. -There’s *no tradeoff* in power. Instead, we gain the power of simpler composition and usage of JavaScript expressions. - -*Compiling* regular CSS files would be counter-productive to some of our goals. Some of these are listed below. - -**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
How do I define a custom fancy route? -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 `` so that it _decorates_ the URL differently from the URL it _fetches_. +On the client side, we have a parameter call `as` on `` that _decorates_ the URL differently from the URL it _fetches_.
diff --git a/examples/with-prefetching/components/Header.js b/examples/with-prefetching/components/Header.js index 2317aee4..7d65722a 100644 --- 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 */ } - prefetch('/about') && console.log('prefetching /about!') }>About + prefetch('/about') && console.log('prefetching /about!')}>About