5 ms·

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 Crea

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 https://github.com/facebookincubator/create-react-app [2] https://github.com/zeit/next.js/issues/1245 https://github.com/zeit/next.js/issues/1245 [3] https://github.com/zeit/next.js/issues/88 https://github.com/zeit/next.js/issues/88 [4] https://github.com/zeit/next.js/issues/1309 https://github.com/zeit/next.js/issues/1309

threatofrain 10y ago
> 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?
- migueloller 10y ago
  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 https://github.com/zeit/next.js#custom-configuration
- Kudos 10y ago
  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.
- geekjock 10y ago
  > 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-e090c699845b https://hackernoon.com/react-js-cms-blog-tutorial-e090c69984...
stickfigure 10y ago
Does this require node.js as a server? How does the page-based router deal with routes like /things/123/subthings/456? Typescript?
- nilliams 10y ago
  > 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 https://news.ycombinator.com/item?id=13968723
- Myrannas 10y ago
  There is a typescript example on their page: https://github.com/zeit/next.js/tree/master/examples/with-typescript https://github.com/zeit/next.js/tree/master/examples/with-ty...
svde 10y ago
>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 https://github.com/berzniz/react-overdrive [2] https://nextgram-overdrive.now.sh/ https://nextgram-overdrive.now.sh/ [3] https://nextgram.now.sh/ https://nextgram.now.sh/

threatofrain 10y ago

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

migueloller 10y ago
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 https://github.com/zeit/next.js#custom-configuration
Kudos 10y ago
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.
geekjock 10y ago
> 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-e090c699845b https://hackernoon.com/react-js-cms-blog-tutorial-e090c69984...

stickfigure 10y ago

Does this require node.js as a server? How does the page-based router deal with routes like /things/123/subthings/456? Typescript?

nilliams 10y ago
> 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 https://news.ycombinator.com/item?id=13968723
Myrannas 10y ago
There is a typescript example on their page: https://github.com/zeit/next.js/tree/master/examples/with-typescript https://github.com/zeit/next.js/tree/master/examples/with-ty...

svde 10y ago

>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 https://github.com/berzniz/react-overdrive [2] https://nextgram-overdrive.now.sh/ https://nextgram-overdrive.now.sh/ [3] https://nextgram.now.sh/ https://nextgram.now.sh/