You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The client side next bundle, which includes React and Glamor is **${X}kb** gzipped.
207
+
208
+
The Next runtime (lazy loading, routing, `<Head>`) contributes **${Y}%** to the size of that bundle.
209
+
210
+
The codebase is ~1500LOC (excluding CLI programs).
211
+
212
+
</details>
213
+
214
+
<details>
215
+
<summary>Is this like `create-react-app`?</summary>
216
+
217
+
Yes and No.
218
+
219
+
Yes in that both make your life easier.
220
+
221
+
No in that it enforces a _structure_ so that we can do more advanced things like:
222
+
- Server side rendering
223
+
- Automatic code splitting
224
+
225
+
In addition, Next.js provides two built-in features that are critical for every single website:
226
+
- Routing with lazy component loading: `<Link>` (by importing `next/link`)
227
+
- A way for components to alter `<head>`: `<Head>` (by importing `next/head`)
228
+
229
+
Next is not suitable right now for creating reusable components that every single React app can use. But we consider that a feature, since your re-usable components should live in separate repositories and then `import`ed.
230
+
231
+
In the future, we might consider a `next export` feature that produces a re-usable build of a component, to take advantage of Glamor and our simple and easy-to-use build system.
232
+
233
+
</details>
234
+
235
+
<details>
236
+
<summary>Why CSS-in-JS?</summary>
237
+
238
+
`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.
239
+
240
+
There’s *no tradeoff* in power. Instead, we gain the power of simpler composition and usage of JavaScript expressions.
241
+
242
+
*Compiling* regular CSS files would be counter-productive to some of our goals. Some of these are listed below.
243
+
244
+
In the future, however, we _might_ be able to take advantage of custom elements / shadow DOM to also support the full CSS syntax once browser support is wide enough.
245
+
246
+
247
+
### Compilation performance
248
+
249
+
Parsing, prefixing, modularizing and hot-code-reloading CSS can be avoided by just using JavaScript.
250
+
251
+
This results in better compilation performance and less memory usage, specially for large projects. No `cssom`, `postcss`, `cssnext` or transformation plugins.
252
+
253
+
It also means fewer dependencies and fewer things for Next to do. Everything is Just JavaScript® (since JSX is completely optional)
254
+
255
+
### Lifecycle performance
256
+
257
+
Since every class name is invoked with the `css()` helper, Next.js can intelligently add or remove `<style>` elements that are not being used.
258
+
259
+
This is important for server-side rendering, but also during the lifecycle of the page. Since `Next.js` enables `pushState` transitions that load components dynamically, unnecessary `<style>` elements would bring down performance over time.
260
+
261
+
This is a very signifcant benefit over approaches like `require(‘xxxxx.css')`.
262
+
263
+
### Correctness
264
+
265
+
Since the class names and styles are defined as JavaScript objects, a variety of aids for correctness are much more easily enabled:
266
+
267
+
- Linting
268
+
- Type checking
269
+
- Autocompletion
270
+
271
+
While these are tractable for CSS itself, we don’t need to duplicate the efforts in tooling and libraries to accomplish them.
272
+
273
+
</details>
274
+
275
+
<details>
276
+
<summary>What syntactic features are transpiled? How do I change them?</summary>
277
+
278
+
We track V8. Since V8 has wide support for ES6 and `async` and `await`, we transpile those. Since V8 doesn’t support class decorators, we don’t transpile those.
279
+
280
+
See [this](link to default babel config we use) and [this](link to issue that tracks the ability to change babel options)
281
+
282
+
</details>
283
+
284
+
<details>
285
+
<summary>Why a new Router?</summary>
286
+
287
+
Next.js is special in that:
288
+
289
+
- Routes don’t need to be known ahead of time
290
+
- Routes are always be lazy-loadable
291
+
- Top-level components can define `getInitialProps` that should _block_ the loading of the route (either when server-rendering or lazy-loading)
292
+
293
+
As a result, we were able to introduce a very simple approach to routing that consists of two pieces:
294
+
295
+
- Every top level component receives a `url` object to inspect the url or perform modifications to the history
296
+
- A `<Link />` component is used to wrap elements like anchors (`<a/>`) to perform client-side transitions
297
+
298
+
We tested the flexibility of the routing with some interesting scenarios. For an example, check out [nextgram](https://github.com/zeit/nextgram).
299
+
300
+
</details>
301
+
302
+
<details>
303
+
<summary>How do I define a custom fancy route?</summary>
304
+
305
+
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)
306
+
307
+
On the client side, we'll add a parameter to `<Link>` so that it _decorates_ the URL differently from the URL it _fetches_.
308
+
</details>
309
+
310
+
<details>
311
+
<summary>How do I fetch data?</summary>
312
+
313
+
It’s up to you. `getInitialProps` is an `async` function (or a regular function that returns a `Promise`). It can retrieve data from anywhere.
314
+
</details>
315
+
316
+
<details>
317
+
<summary>Why does it load the runtime from a CDN by default?</summary>
318
+
319
+
We intend for `Next.js` to be a great starting point for any website or app, no matter how small.
320
+
321
+
If you’re building a very small mostly-content website, you still want to benefit from features like lazy-loading, a component architecture and module bundling.
322
+
323
+
But in some cases, the size of React itself would far exceed the content of the page!
324
+
325
+
For this reason we want to promote a situation where users can share the cache for the basic runtime across internet properties. The application code continues to load from your server as usual.
326
+
327
+
We are committed to providing a great uptime and levels of security for our CDN. Even so, we also **automatically fall back** if the CDN script fails to load [with a simple trick]().
328
+
329
+
To turn the CDN off, just set `{ “next”: { “cdn”: false } }` in `package.json`.
330
+
</details>
331
+
332
+
<details>
333
+
<summary>What is this inspired by?</summary>
334
+
335
+
Many of the goals we set out to accomplish were the ones listed in [The 7 principles of Rich Web Applications](http://rauchg.com/2014/7-principles-of-rich-web-applications/) by Guillermo Rauch.
336
+
337
+
The ease-of-use of PHP is a great inspiration. We feel Next.js is a suitable replacement for many scenarios where you otherwise would use PHP to output HTML.
338
+
339
+
Unlike PHP, we benefit from the ES6 module system and every file exports a **component or function** that can be easily imported for lazy evaluation or testing.
340
+
341
+
As we were researching options for server-rendering React that didn’t involve a large number of steps, we came across [react-page](https://github.com/facebookarchive/react-page) (now deprecated), a similar approach to Next.js by the creator of React Jordan Walke.
342
+
343
+
</details>
344
+
345
+
## Future directions
346
+
347
+
The following issues are currently being explored and input from the community is appreciated:
348
+
349
+
- Support for pluggable renderers [[#20]((https://github.com/zeit/next.js/issues/20))]
350
+
- Style isolation through Shadow DOM or "full css support" [[#22](https://github.com/zeit/next.js/issues/22)]
0 commit comments