This article is meant to demonstrate the concepts of Universal Application and how Next.js tackles it. We provide some detailed code snippets coming from a fully functional example which you can explore.

How to get React SEO-friendly by using Next.js

This blog post is a little old, 👵🏻  but wait! We've still got you covered with these posts 🚀🔥

Next.js SEO Tutorial: Try a Quick Project with Key Optimizations

Guide: React SEO Considerations and Solutions

SEO has become one of the most crucial points on the Internet to get a good ranking on Google and offer visibility to your website. If you have ever wondered how to stick with React for your web application without the lack of SEO and poor latency on the first load, you should take a look at what is coming Next. test

The goal for Next.js is to offer a developer experience close to what you have with a simple React application, by gaining all the benefits of a Universal App. It reduces the learning curve and simplifies the adoption from the React community.

You only need to have Node.js installed on your system to begin building Next.js applications.
You’ll also have to set up the following dependencies in your project:

These three libraries are all the basics that you need to get started.

Next.js offer a routing system out of the box. It’s completely page-based which offers a configuration-free routing system.
Paged-based routing means that one component is linked to a url based on the path of your component in the project.

When getting started with Next.js, you have two simple actions to build your first page:
- In your source folder, create a folder named pages
- Build your first React component

import React from 'react'

export default () =>
  <div>
    <p>Hello Next.js</p>
  </div>

By visiting the homepage of your website, you should see Hello Next.js displayed there.
With a page-based routing, you have 1 component for each page. This is a common system that you can find in static site generators.

Next.js’ built-in page-based routing is easy to use, but most of the time you need dynamic URLs. Imagine that you need a dynamic parameter that you want to manage on the route level and inject it in your component as props. This is where dynamic routing becomes necessary.

Next.js has a built-in server implementation which will need to be replaced to implement dynamic routing.
As you’ll see soon, you’re going to set up a simple Express server. Express is a famous tool for the Node.js community because of its simplicity and its powerful url matching system.

In this example, you will discover next-routes, an easy tool for handling both server and client side routing.

Because we use an Express server implementation, your routes will have the exact same syntax in terms of pattern matching which you can find in details in the Express documentation.

const routes = require('next-routes')
                                            
module.exports  =  routes()
.add('index', '/')
.add('products', '/products')
.add('product', '/products/:uid')
.add('bloghome', '/blog')
.add('blogpost', '/blog/:uid')
.add('preview', '/preview')
.add('notfound', '/*')

In the example above, you have two dynamic routes for aproduct and a blogpost. In both cases, we’re passing a uid parameter to the corresponding component.

Once your routes are ready, your just need to set up your server and provide your routing configuration to it.

const  next  =  require("next")
const  routes  =  require("./routes")
const  PORT  =  parseInt(process.env.PORT, 10) ||  3000
const  app  =  next({ dev:  process.env.NODE_ENV  !==  "production" })
const  handler  =  routes.getRequestHandler(app)

const  express  =  require("express")

app.prepare().then(() => {
  express()
  .use(handler)
  .listen(PORT, () =>  process.stdout.write(`Point your browser to: http://localhost:${PORT}\n`))
})

Updating your build environment to include your server

Once you’ve implemented an Express server, you need to take it into account and update your build scripts.

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "postinstall": "npm run build",
  "start": "NODE_ENV=production node server.js"
}

This is where next-routes becomes really convenient.
By exporting your routes, you also have a fully featured router which you can use to navigate through your application without worrying if you’re on the server side or on the client side.
You can navigate between components in two ways:

1. The declarative way with a Link component:

import React from 'react'
import { Link } from './routes'

export default ({ query }) =>
  <div>
    <div>Welcome to my blogpost with a dynamic UID: {query.uid}</div>
    <Link to='bloghome'>
      <a>Blog Home</a>
    </Link>
  </div>

Your can observe two things here.
First, your have a variable named query coming from the props which contains your dynamic parameter uid. It comes from your routing system.
Second, your have a component Link coming from your routes configuration. It allows you navigate between components without doing a full page reload.

2. The imperative way with a Router object:

import React from 'react'
import {Router} from './routes'

export default class extends React.Component {
  handleClick () {
    Router.pushRoute('bloghome')
  }
  render () {
    return (
      <div>
        <div>Welcome to my blogpost with a dynamic UID: {this.props.query.uid}</div>
        <button onClick={this.handleClick}>Blog home</button>
      </div>
    )
  }
}

In this case, you’re getting the Router object from your route configuration. It allows you to manage your routing programmatically instead of doing it from the template.

Querying your content from an external API

Once your application is set up, you’ll want to feed it with some actual content, most likely coming from an external source. This is painful to do so in a Universal App but Next.js offers an easy way to handle it.

Along with the well known React component lifecycle, each page component is able to implement an async function getInitialProps which provides the fetched data as props in your component.

import { Link } from  './routes'
import { Client, linkResolver } from  '../components/prismic'
import { RichText } from  'prismic-reactjs'

export  default  class  extends  React.Component {
  static  async  getInitialProps({ req, query }) {
    const  blogpost  =  await  Client(req).getByUID('blog_post', query.uid)
    return { blogpost }
  }

  render() {
    return (
      <div>Blogpost name: { RichText.render(this.props.blogpost.data.name, linkResolver) }</div>
    )
  }
}

In the simple example above, we asynchronously fetched data from an external source and populated it into our component.

Gaining speed by prefetching your content

Next.js also has an embedded mechanism to prefetch all the related pages to help speed up your website and offer a really fast user experience.
To prefetch a link, all you have to do is add a prefetch property to the link.

Basically, for each Link with a tag prefetch, Next.js pre-fetches the component’s JSON representation in the background, via a  ServiceWorker. If you navigate around, odds are that by the time you follow a link or trigger a route transition, the component has already been fetched. Furthermore, since the data is fetched by a dedicated method getInitialProps, you can pre-fetch aggressively without triggering unnecessary server load or data fetching.

A closer look at the Next.js implementation of Universal App

Universal Apps are a kind of application which are built purely in JavaScript with Node.js on the server side.
This architecture became really famous with React but is currently available for many client-side frameworks or libraries such as Angular, Vue.js, etc.
Basically, It allows you to share your components between the server and the client so you can render it on both sides.

How your components are rendered on the first load

The first load is always handled by the server which renders the component as static markup and then sends it to the client to simply render that HTML.
Once it’s rendered, the browser loads the JavaScript and applies all the browser handlers to your components such as ‘onClick’, ‘onChange’, etc.
Doing so prevents you from waiting for your client to load your JavaScript and then render your component.

How to feed your components with data on both sides

Most of the time, your components will rely on external data to be rendered. External data also usually means asynchronous data.

On the server side, Next.js accesses the query required for the requested page so it can compute this query and provide the data to your component before sending it to the client.
Once the query is done, Next.js will simply send a static markup to your browser and re-execute React to bind all the browser events.

To avoid your component making the same query twice, Next.js will serialize the data along with the HTML and provide it to your components.

Next.js exposes a static asynchronous getInitialProps function for each page component and then serializes the fetched data in a script tag. On the client side, it reads the data in the window and provides it to the components as props. This mechanism is called rehydratation.

Here at Prismic, we consider Next.js as a convenient library for people who are used to React but struggle when it comes to SEO and complex architecture to address it.
It’s quite easy to get started but also very powerful since it offers a comfortable space for customization.
Integrating marketing content and SEO pages has become very productive with Next.js.

You can find a fully functional example of a coffee shop built with Prismic and Next.js, and all the sources here on GitHub.
All the examples above are inspired by this sample.

Vue.js is surprisingly easy to start with, offers plenty of essential features out of the box, and provides very good performance. Read for more facts, arguments, code snippets and benchmarks.

3 reasons to use Vue.js in your next web project

It's hard to choose a JavaScript framework – because there's too many of them, and because the differences are not immediately obvious. If you agree that productivity ("how fast can I get things done") and performance ("how fast will my website be") are the most important criteria, let me show why Vue.js is a very solid framework for building websites and single-page applications.

1) A component library based on HTML, CSS & JS makes it simple to get started

The first thing you need to do is to set up your environment. Vue.js is really easy to start with and doesn't require a build tool such as Webpack. All you have to do is making a single import in a script tag:

First, we're going to build a basic component just to show you how your template and your JavaScript code are related.

You have two ways of building a component. Let's start with the simplest one ever which is only a combination of JavaScript and HTML in a really minimalist way:

var app = new Vue({
 el: '#app',
 data: {
   name: 'James'
 }
})

<div id="app">
 Hello <input type="text" value={{ name }} />
</div>

#app input {
  padding: 10px;
  color: #121212;
  font-size: 12px;
}

That’s pretty much everything you need to start making some good stuff.

As you can see, we keep the correspondence between the template and the JavaScript thanks to the id app and we just provided data so you can bind it dynamically in your HTML.

Vue.js has a two-way binding system by design, which means that you can alter data from the JavaScript or from the template. Let’s consider our code snippet above: if you alter the input text, it will automatically update your variable on the JavaScript side. On the contrary, if you change the data on the JavaScript file, it will rerender your template with the new value in the input.

Vue.js relies a lot on declarative models, making your code easy to read and easy to understand at first sight.

It’s also the closest you can get to the Web Component Custom Element spec without the downside of heavy polyfill and poor performance for legacy browsers that you can find in true Web Component implementation such as Polymer.

2) The essential features like routing and data management are covered by official libraries

Vue.js includes the core module that allows you to build components as we discovered, but it also includes a set of opinionated libraries built by the Vue.js team itself such as vue-router for the routing part, Vuex to manage your data, vue-cli to bootstrap a new project.

A major point in any Web application is the routing system and for that purpose, you can rely on vue-router. You can declare all your routes in a concise way and exploit dynamic routing parameters in your component with only a few lines of code.

import Page from './components/page';

export default new VueRouter({
  [
    { path: '/page/:uid', component: Page }
  ]
});

One other fundamental aspect in any complex web app is the communication between components and for that matter, how to manage your data.

Vuex is a module which is inspired by Redux and the Elm architecture. It provides a very declarative way to handle actions in components and dispatch the data to any component.

const store = new Vuex.Store({
  state: {
    doc: null
  },
  mutations: {
    setDocument(state, doc) {
      state.doc = doc
    }
  },
  actions: {
    async queryDocument({ commit }, { customType, uid }) {
      commit('setDocument', await Prismic.getByUID(customType, uid))
    }
  }
})

How to build a component mixing Vuex and vue-router

Now it’s time to make it work all together in a simple component:

var app = new Vue({
 el: '#page,
 beforeRouteUpdate(to, from, next) {
  store.dispatch('queryDocument', { customType: 'homepage', uid: to.params.uid })
  .then(next)
})

beforeRouteUpdate is just a component hook to indicate when your code should be executed when switching route.

Use vue-cli to quickly bootstrap a project

vue-cli is a command line tool that helps you bootstrapping a simple project with a build tool already preconfigured.

It can be really useful to build a component in a file with the extension .vue which allows you to put the HTML, CSS and JavaScript inside to scope your component correctly.

It’s also useful because you get fine helpers like babel to handle new syntax in JS like async/await.

You can find more information on the official Vue.js docs to help you get started.

3) Fast rendering ensured by virtual DOM and minimal load time

Vue.js is only ~30 KB gzipped with the core module, the router and Vuex.

A minimal footprint offers short load time, meaning higher speed for users and better ranking on the speed criterium for Google crawler.

Vue.js also took inspiration in ReactJS by implementing Virtual DOM under the hood since the version 2.0. Virtual DOM is basically a way to generate a version of the DOM in-memory each time you change a state and compare it to the actual DOM, so you can update only the part that needs to be updated instead of re-rendering everything.

Vue.js offers some really good overall performance as you can see on the following benchmarks:

Duration in milliseconds ± standard deviation (Slowdown = Duration)

(Source: third-party benchmarks by Stefan Krause)

Here at Prismic we consider Vue.js as a really approachable way of building complex web applications that can be easily integrated with external tools through an API. 

if you’re interested in integrating a CMS into your Vue.js projects – so that non-tech authors and editors can change website content in a familiar environment – have a look at full documentation on Vue.js, as well as a plugin and a starter project.

We've updated the PHP starter kit to reflect the recent release of Prismic API v2. Read a summary of the changes. They're good. (3 min read)

New PHP starter kit for Prismic new API v2

In mid-2017 we've reworked the API for fetching content and released the results under the name Content Query API v2. The new API has been simplified in terms of the content structure — in particular to rely less on development kits. 

All the differences between API v1 and v2 are documented in a separate article.

We plan to continue supporting both v1 and v2, as we have no intention of making anyone upset by breaking their well-crafted projects.

The API update had to be reflected in the development kits that we provide. After releasing the JS starter kit v2 we reworked the PHP starter kit.

What do I need to do with my old PHP projects that use API v1?

You don't need to do anything. The API v1 will be supported and your projects will be just fine.

We recommend that you use the new starter kit for your new projects, though, for better performance and general peace of mind.

Today, we are launching a new color field that improves editors' experience.

Improvements for the color field

As you might have heard, we deploy every day. This Summer, we chose to tackle a lot of small improvements that were discussed with our community. 

Today, we are deploying a new color field that improves editors' experience.

Since the beginning of prismic.io, we offered a color field that leverages the standard browser color picker. Unfortunately, this field created some frustration for some editors. 

The new field  works with all browser and allows editors to empty their color field. 

Color fields are interesting for different use cases, like offering a customization tab for editors to personalize their website and landing.

Feel free to join our community forum or to reach to us with feedback!

Deliver a website with a visual Page Builder for your marketing team

Arnaud Lewis

How to get React SEO-friendly by using Next.js

3 reasons to use Vue.js in your next web project

New PHP starter kit for Prismic new API v2

Improvements for the color field

Deliver a website with a visual Page Builder for your marketing team