Skip to main content

Front-End Server: Next.js

Next.js Logo

Server-Side Rendering (SSR) might be a hard requirement if your website needs to be accessible to programs. Those can be bots from Google for SEO, Facebook for its Open Graph, or Twitter for Cards for instance.

If you want to expose pages that are user-generated or dynamic in general (dynamic SSR), you cannot create those pages at build-time, you need a server to render them on the fly. That's where Next.js (92% satisfaction) steps in. Next might not have all the plugins Gatsby has, but it can do both static SSR and dynamic SSR, which makes it a better (and only) choice for this kind of larger project. Just like other Vercel products, it is very elegantly conceived and is a delight to use.

Might change soon?
Possibly

Setup

To install Next.js, run:

yarn add next

And add the following scripts:

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

I typically prefer to put my pages in an src folder, and create a first Hello World page like so:

const IndexPage = () => <div>Hello world</div>

export default IndexPage

Alternatives

Next.js is in direct competition with Gatsby (70% satisfaction) and Create React App in the sense that they all handle the bundling, configuration, and static site generation of your app. Next has a unique edge over those by offering dynamic server-side rendering, which is probably why it became the most popular option of the three. The future launch of Gatsby Functions might be a sign that Gatsby could handle dynamic server-side rendering in the future to be on a par with Next. Gatsby lost a bit of traction but is still definitely a strong contender thanks to its rich plugins ecosystem.

Next.js is also in an indirect competition with full-stack frameworks like Blitz and Redwood. See the framework page for more details.