News for hackers. Stuff that matters.

A comment on Next.js 2.0.

Re:Next.js 2.0 by migueloller on Monday March 27, 2017 @08:56AM (#13967275)
We recently used Next.js to build out an MVP. It was a pleasure to work with.

For those wondering what this is, it's basically a slightly more opinionated Create React App [1].

Here are some of the benefits:

- No need to setup complicated tooling

- Server and client (SPA-style) rendering out of the box

- Filesystem for routing using the `pages` directory

- `getInitialProps` component lifecycle to encapsulate data requirements per component

- Automatic code splitting for each route

- If it works with React, it works with Next.js

Here are some of the issues we encountered:

- Importing non-JS files from `node_modules` (like normalize.css) was not as simple as it could be (#1245 [2])

- Animation transition between pages is still being worked on (#88 [3])

- There are still some inconsistencies between server and client that could improve, like running Webpack on the server (#1245 [2])

- Doing proper scroll restoration when routing (#1309 [4])

We will continue to use it as long as it keeps letting us move fast without having to worry about spending hours setting up React tooling.

[1] https://github.com/facebookincubator/create-react-app

[2] https://github.com/zeit/next.js/issues/1245

[3] https://github.com/zeit/next.js/issues/88

[4] https://github.com/zeit/next.js/issues/1309

[ Parent | on HN ]
Re:Next.js 2.0 by stickfigure on Monday March 27, 2017 @02:26PM (#13970340)
Does this require node.js as a server?

How does the page-based router deal with routes like /things/123/subthings/456?

Typescript?

[ Parent | on HN ]
Re:Next.js 2.0 by nilliams on Monday March 27, 2017 @02:31PM (#13970388)
> Does this require node.js as a server?

Yes

> How does the page-based router deal with routes like /things/123/subthings/456?

It doesn't, you have to use the programmatic router for that.

> Typescript?

Don't believe so, see this comment in this thread: https://news.ycombinator.com/item?id=13968723

[ Parent | on HN ]
Re:Next.js 2.0 by Myrannas on Monday March 27, 2017 @05:35PM (#13972009)
There is a typescript example on their page:

https://github.com/zeit/next.js/tree/master/examples/with-ty...

[ Parent | on HN ]
Re:Next.js 2.0 by svde on Monday March 27, 2017 @04:02PM (#13971191)
>Animation transition between pages is still being worked on

check out react-overdrive[1], which is also referenced in issue#88 but deserves to be mentioned here imo. The author provides an example[2] what overdrive looks like based on the instagram example[3] from next.js.

[1] https://github.com/berzniz/react-overdrive

[2] https://nextgram-overdrive.now.sh/

[3] https://nextgram.now.sh/

[ Parent | on HN ]
Re:Next.js 2.0 by threatofrain on Monday March 27, 2017 @12:04PM (#13968853)
> For those wondering what this is, it's basically a slightly more opinionated Create React App.

Does that mean the top benefit of next.js is to alleviate difficulties with Webpack + Babel + etc?

[ Parent | on HN ]
Re:Next.js 2.0 by geekjock on Monday March 27, 2017 @02:57PM (#13970605)
> Does that mean the top benefit of next.js is to alleviate difficulties with Webpack + Babel + etc?

And server-side rendering which solves common SEO and performance challenges of SPAs. Here's an article showing where server-side rendering is especially useful for SEO reasons:

https://hackernoon.com/react-js-cms-blog-tutorial-e090c69984...

[ Parent | on HN ]
Re:Next.js 2.0 by migueloller on Monday March 27, 2017 @12:25PM (#13969066)
I wouldn't say it's the top benefit but it is a benefit indeed! You don't have to worry about setting any of those up unless you want to customize them. You shouldn't have to because they come with sane defaults (i.e., Babel has support for latest ES and the Webpack config takes care of everything for you).

For example, the only custom change we had to make was to add Webpack's `DefinePlugin` to expose `.env` variables in the client. It was extremely easy though (3 LOC) and we didn't need a full Webpack config.

See: https://github.com/zeit/next.js#custom-configuration

[ Parent | on HN ]
Re:Next.js 2.0 by Kudos on Monday March 27, 2017 @02:42PM (#13970478)
It's why I use it. I can build my own Webpack configs just fine and have done for a long time, but I just don't want to do it anymore.
[ Parent | on HN ]