
Next.js 3.0 Preview: Static Exports and Dynamic Imports - Rauchg
https://zeit.co/blog/next3-preview
======
nfriedly
I used Next.js to build [http://user-agent.io/](http://user-agent.io/) over a
weekend and I'm really happy with the results so far. Dynamic url routing is a
bit awkward, but not onerously so. (It also uses Express to handle WebSockets
and dynamic routing for the share/host pages.)

Source is at [https://github.com/nfriedly/user-
agent.io](https://github.com/nfriedly/user-agent.io) if anyone is interested.

I'm thinking about switching some of my work projects over to it sometime
soon.

~~~
vmasto
Just a heads up you're using the development version of React which is very
very slow. You'd want to switch to the production version, not sure how that
works in next but you generally build your React with NODE_ENV set to
`production` for this to happen.

~~~
underwater
"Very very slow" might be a bit of an overstatement. The initial React render
for that page takes 200ms on a MacBook. A release build will speed that up
slightly, and cut down the bundle a little, but in the scheme of things it's
not going to be noticeable to the end user.

If you actually wanted the page to feel fast you would probably do something
like <script>document.write(window.navigator.userAgent)</script>

~~~
vmasto
Possibility of 3x-5x perf impact according to Dan Abramov.
[https://github.com/facebook/react/issues/2608#issuecomment-2...](https://github.com/facebook/react/issues/2608#issuecomment-219690343)

I did not expect to argue in HN of all places whether it's OK or not to run
the development mode of a library in _production_ when it's so simple not to
and the authors are trying so hard to prevent people from doing that.

------
onestone
I evaluated Next.js recently, and while it looks excellent on the surface,
there were a couple of red flags:

\- Devs insisting (incorrectly) that they _have_ to ship the component source
code _inline_ in the server-rendered HTML. I commented on this issue here:
[https://github.com/zeit/next.js/issues/427#issuecomment-2908...](https://github.com/zeit/next.js/issues/427#issuecomment-290882395)

\- The same transpiled code is used both server-side and client-side. Code
which should be strictly server-only, e.g. getInitialProps(), is visible
client-side as well.

~~~
kbody
I can only comment about `getInitialProps()`. Of course it's should be on
client-side as well, that's the whole point of universal rendering. In
combination with isomorphic-fetch you can use your (Rest) API and have nothing
to change on the code. I think it's an excellent design decision to makes
components actually independent and easily composable.

~~~
onestone
You are right about that, I admit.

Still, using the same transpiled code both client-side and server-side is
suboptimal at least. E.g. if I target Node 7.x on the server, I don't need to
transpile async functions for example (and screw stacktraces in the process).

~~~
onestone
Also, I might still want to do some things differently server-side in
getInitialProps(), despite most of the code being shared. For example, clients
might access the API through a load-balanced frontend, while on the server I
might want to prefer talking to an API process on the same machine.
Authentication might also be different. Of course these things (e.g. the API
endpoint) shouldn't be hardcoded, but even then you need to get them
somewhere, most likely a configuration file or an environment variable. And
sharing these details (names of environment variables for example) with the
client is not something I particularly like.

------
czzarr
A bit off topic but since it's mentioned in the article: how does the
unlimited free static hosting compare with netlify's offering?

------
nikon
I'm in the market for a good React Universal boilerplate and am considering
Next.js for my next project...

A couple of things:

1) Why do you not use React Router? How does your own router play with Redux?

2) Is it possible to strip out now.sh? I appreciate it's how you make money
but I want to deploy to my own infrastructure.

~~~
fooey
I tried to do a project with next.js but their router was just too awkward and
limiting. Unless you're doing straight 1:1 route to code, you're basically on
your own.

[https://github.com/zeit/next.js#custom-server-and-
routing](https://github.com/zeit/next.js#custom-server-and-routing)

~~~
Rauchg
That's the opposite of what that page is trying to explain. We'll take a look
at the wording in case it's confusing.

tl;DR: You can do any sort of routing! We use a /:org/:project scheme similar
to GitHub at [https://zeit.co](https://zeit.co) :)

Some examples:

\-
[https://github.com/zeit/next.js/tree/master/examples/paramet...](https://github.com/zeit/next.js/tree/master/examples/parameterized-
routing)

\- [https://github.com/zeit/next.js/tree/master/examples/with-
ne...](https://github.com/zeit/next.js/tree/master/examples/with-next-routes)

\- [https://github.com/zeit/next.js/tree/master/examples/with-
pr...](https://github.com/zeit/next.js/tree/master/examples/with-pretty-url-
routing)

~~~
fooey
The named routes example is probably pretty close to what I was looking for.
Oh well, maybe next time.

------
aioprisan
I'm very impressed by the quality of the Next.js framework and how lightweight
it is. Glad to see it move forward!

------
kelvin0
I am wondering why server-side rendering? I thought that stage was passed and
everyone was doing client-side stuff? Please forgive a web n00b for asking.

~~~
fooey
You can get a faster initial load going with SSR since you're basically
skipping a round trip. The really smart SSR's like Redfin's react-server
([https://github.com/redfin/react-server](https://github.com/redfin/react-
server)) give you faster "above the fold" rendering too.

Also, while Google can deal with them, a lot of crawlers don't understand
SPA's. So if someone links to you from Facebook for example, their auto
content loading doesn't work.

------
desireco42
I really like a static website command, NextJS impresses me every time.

------
daxhoqodu
can anyone compare with meteor please?

~~~
Rauchg
1\. Embraces React exclusively[1]. We at ZEIT think the React Component model
is the de-facto component model of the web and mobile.

In practical terms, this means that every "page" or "entry point" to your app
is just an exported component `function` or `class`. `export default () =>
<p>My component!</p>`.

At the expense of a storm of HN downvotes, it's "more PHP than Meteor" :)

2\. No data layer built in, syncing, Models, etc. We added an extra lifecycle
hook called `getInitialProps` (think of it as the counterpart to
`getInitialState`) whose contract is returning data as a `Promise`.

This allows you to combine and compose different approaches to data retrieval.
It works just as well with REST as it does with GraphQL or Socket.IO or
server-sent-events or offline-only or…

3\. It hides configuration details but allows you to tap into them.

It's powered by `Babel` and `webpack`, which are exposed as a single command
(`next` and `next build`), but you can completely override and customize them.

These are just some ideas. We created it to power the team collaboration
aspects of our Web UI ([https://zeit.co](https://zeit.co)). We are committed
to supporting it because we use it and we love it.

[1] Also React alternatives like Inferno and Preact
([https://github.com/zeit/next.js/tree/master/examples/using-p...](https://github.com/zeit/next.js/tree/master/examples/using-
preact))

~~~
benjaminjackman
Just curious: is Typescript supported out of the box?

~~~
benjaminjackman
To answer my own question to those that stumble upon this via google or
whatever. It doesn't appear to be. However this example was pretty helpful (as
of 20170518):

[https://github.com/zeit/next.js/tree/d08e027a8c1d9bfe773a8b3...](https://github.com/zeit/next.js/tree/d08e027a8c1d9bfe773a8b3c8b143ff0f9341ccf/examples/with-
typescript)

------
hsribei
How does Next.js' static export feature compare to using Gatsby.js?

------
segphault
Interesting concept, but it seems rather heavy. Installing it from npm pulls
in over 400 packages, weighing in at about 60MB.

~~~
joshmanders
Try installing non-dev dependencies.. That's where a lot of your weight comes
from, which is not in production.

~~~
segphault
So, I just did "npm install next react react-dom" which isn't bringing in
next's development dependencies. Is there something that I'm missing?

~~~
joshmanders

        npm install next react react-dom --production

~~~
segphault
That gets me the exact same thing. And afaik what you get from --production is
the default behavior when you install a package directly from npm.

~~~
joshmanders
What's the contents of your $HOME/.npmrc file? Because it shouldn't be unless
you have `production = true` set.

------
gavinpc
> dynamic import

Umm... you mean like AMD? Yeah, it's awesome ( _edit_ I mean, was a solved
problem years ago). Somebody explain to me how people live without this.

~~~
exogen
AMD was a handy workaround, but better solutions exist now.

For one thing, each and every little module doesn't need to be written with
knowledge of AMD or how it's going to be imported at all. If you used AMD with
this component example, every single component you write would need to be
wrapped in a `define()`. This has no wrapping, just standard JS exports.

Secondly, each module doesn't need to know its own name (to pass to the
`define()` call), or even have a static name at all, it can effectively be
anonymous & truly dynamic.

And finally, AMD modules make assumptions about the environment – for example,
that you have control over `window.define`. If you're a third-party script
trying to load things on someone else's website, good luck – you either just
told someone _else 's_ module handler that you loaded, and have no visibility
into it, or you clobbered the existing `window.define` and broke other
people's scripts. (My former company's product was a third-party JS widget,
and co-existing with dozens of other scripts and module loaders was a huge
problem.)

~~~
gavinpc
These are all valid points... but I'm curious what you mean by "better
solutions exist now." Basically everybody's agreed to use a transpiler for the
foreseeable future [0]. How is that not a workaround?

[0] This is my first time to see that any browser has actually shipped ES6
modules:
[http://caniuse.com/#feat=es6-module](http://caniuse.com/#feat=es6-module)

