Writing Server-rendered React Apps with Next.js

The dust has settled a bit as far as the JavaScript front-end ecosystem is considered. React has arguably the biggest mindshare at this point, but has a lot of bells and whistles you need to get comfortable with. Vue offers a considerably simpler alternative. And then there’s Angular/Ember which, while still popular, are not the first recommendations for starting a new project.

So, while React is the most popular option, it still requires lot of tooling to write production-ready apps. Create React App solves many of the pain points of starting, but the jury is still out on how long you can go without ejecting. And when you start looking into the current best practices around front-end, single-page applications (SPAs) --- like server-side rendering, code splitting, and CSS-in-JS --- it’s a lot to find your way through.

That’s where Next comes in.

Why Next?

Next provides a simple yet customizable solution to building production-ready SPAs. Remember how web apps were built in PHP (before “web apps” was even a term)? You create some files in a directory, write your script and you're good to deploy. That's the kind of simplicity Next aims at, for the JavaScript ecosystem.

Next is not a brand new framework per se. It fully embraces React, but provides a framework on top of that for building SPAs while following best practices. You still write React components. Anything you can do with Next, you can do with a combination of React, Webpack, Babel, one of 17 CSS-in-JS alternatives, lazy imports and what not. But while building with Next, you aren't thinking about which CSS-in-JS alternative to use, or how to set up Hot Module Replacement (HMR), or which of many routing options to choose. You're just using Next --- and it just works.

I'd like to think I know a thing or two about JavaScript, but Next.JS saves me an ENORMOUS amount of time. --- Eric Elliott

Getting Started

Next requires minimal setup. This gets you all the dependencies you need for starting:

$ npm install next react react-dom --save

Create a directory for your app, and inside that create a directory called pages. The file system is the API. Every .js file becomes a route that gets automatically processed and rendered.

Create a file ./pages/index.js inside your project with these contents:

export default () => (
  <div>Hello, Next!</div>
)

Populate package.json inside your project with this:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Then just run npm run dev in the root directory of your project. Go to http://localhost:3000 and you should be able to see your app, running in all its glory!

Just with this much you get:

• automatic transpilation and bundling (with Webpack and Babel)
• Hot Module Replacement
• server-side rendering of ./pages
• static file serving: ./static/ is mapped to /static/.

Good luck doing that with Vanilla React with this much setup!

Continue reading %Writing Server-rendered React Apps with Next.js%

by Jatin Shridhar via SitePoint