Comment by migueloller | Hacker News Reader

Comment by migueloller | Hacker News Reader

Parent Full thread

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

Does this require node.js as a server?

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

Typescript?

> 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

There is a typescript example on their page:

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

>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/

> 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?

> 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...

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

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.

Reply on news.ycombinator.com