Saying Hello with Next.js

27 Oct 2016

Next.js is a small framework for server-rendered universal JavaScript webapps, built on top of React, Webpack and Babel.

Let’s say hello

Create your package.json and install Next.js framework.

$ npm install next --save
$ mkdir pages

Create index page (pages/index.js)

import React from 'react'
import Link from 'next/link'
export default () => (
  <div>
    <h1>Hello from Gilang Chandrasa!</h1>
    <Link href="/about">More about me</Link>
  </div>
)

Create another page. (pages/about.js)

import React from 'react'
import Link from 'next/link'

export default class extends React.Component {
  static getInitialProps({ req }) {
    return {
      server: req ? true: false
    }

  }
  render()  {
    return <div>
        <h1>Rendered by { this.props.server ?  'server': 'client'}</h1>
        <p>
          I'm Gilang Chandrasa. Follow me on Twitter at <a href="https://twitter.com/gchandrasa">gchandrasa</a>
        </p>
        <Link href="/">Home</Link>
      </div>
  }
}

This is the directory structure look like.

hello
├── package.json
└── pages
    ├── about.js
    └── index.js

I love that it’s really simple to create universal webapps using this framework. I’m excited to experiment more with this framework. See you next time.

Note: My first attempt with Next.js failed due to my Node.js version (v4.5.0). I upgrade Node.js to latest LTS (6.9.1) and it’s just work.