terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

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

Browse source 
* Updated README with new features and code fixes

* Removed staticMarkup option from docs.

* Fixed quiet parameter info.
This commit is contained in:
Dan Zajdband 2016-12-20 17:57:11 -05:00 committed by Guillermo Rauch
parent b337433d14
commit bacb42ead4
2 changed files with 21 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
README.md
View file

@ -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>
<summary>How do I use CSS-in-JS solutions</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.
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
<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>

2
examples/with-prefetching/components/Header.js
View file

@ -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}>