Next.Js

Is it the next big thing in JavaScript?

There are too many JS frameworks out there — we all know that.
But still, we see new JS frameworks every day.

Next.js The newest and noteworthy JS framework, just after create-react-app.

It comes with pretty cool features including:

• File system based router
• Code splitting
• Server side rendering
• Zero config. setup
• Easy deployment

Have a look at Zeit’s blog post for more about Next.js.

Fatigue is a common factor in the JS world.

Next.js may not cure JS Fatigue, but it allows us to build web apps in JavaScript as we write websites using PHP.

Just create a few files for pages in your app, and you are done.

Unlike PHP, we’ll be able to get help from JS ecosystem including NPM, ES201X features, babel and Webpack.

Most importantly, it’s minimalistic and will stay this way.

Doing the right thing: Building around a router

A lot of modern JavaScript app frameworks didn’t get this correct.

A framework should have a router, and it should do more than just client side routing.

Next.js has its own router, and it builds on top of it. Most importantly, you don’t really need to know about the router at all.

What?

It uses the file system as the router for your app. For example, let’s say you need to create web app with two pages (Home page and About page).

You would then create two files inside a page directory, and export a React component which contains the content of your file.

Have a look at following code snippets:

This is our common Header component: components/Header.js

import React from 'react'
import Link from 'next/link'
export default () => (
  <div style={{ marginBottom: 20 }}>
    <Link href='/'>
      Home
    </Link> |
    <Link href='/about'>
      About
    </Link>
  </div>
)

Here’s our Home page: pages/index.js

import React from 'react'
import Header from '../components/Header'
 
export default () => (
 <div>
   <Header />
   <p>This is my Homepage</p>
 </div>
)

Here’s our About page: pages/about.js

import React from 'react'
import Header from '../components/Header'
 
export default () => (
 <div>
   <Header />
   <p>This is the About page</p>
 </div>
)

That’s it.

Then you’ll get a server rendered web app which only loads modules that you need for the given page(AKA: code splitting). When you change a route in the client side, it’ll load the additional modules and load your page.

But, routing is pretty basic right now.

Currently, you can’t implement dynamic routes — I think that’s a standard feature of any router.

There have been a few attempts(here, here and here) to implement this, and I hope we will see something simple and solid pretty soon.

Minimalistic Approach

Next.js has a pretty small code base. For an example, there’s:

• no built-in data system
• no auth system
• no testing framework

Basically, it’s just a way to serve your pages.

You need to bring additional stuff which is needed for your app.

Since it’s JavaScript, it won’t be a big deal.

This approach gives us the flexibility to use Next.js for any kind of app, whether it’s a hobby project or an app with millions of users.

You choose your backend

Backend is the core of your app and, usually, it’ll be the complex part of your app. Initially, it won’t be too complex, but as your app is gets bigger then you will need to start worrying about it.

With Next.js your client side app and the backend is decoupled, this will help you to keep the Next.js app throughout the life-cycle of your app/startup.

Configure as we want to

What’s coming with Next.js is a pretty basic React setup. For a real app, we need to customize it as we want.

For example, we may need to add some babel plugins and a few Webpack loaders.

Currently, that’s not doable with Next.js. Luckily, you’ll be able to do it pretty soon.

We’ll be able to configure everything in Next.js, not just babel and Webpack configs.

So, is this is the Future of JS Apps?

Currently Next.js only support React. In the future, I want Next.js to support other emerging frameworks, such as like Vue.

Anyway, it seems like Next.js has learnt some lessons from other JS frameworks (specially, from Meteor) and it’s trying to do the right thing.

It may not be ready to use for your app right now, but just keep watching — it’s getting better and better.

Even though Next.js is using Webpack, it doesn’t use Webpack’s code splitting feature. Instead, it has its own.

I’ll walk you through how Next.js works in my next blog post.
Stay tuned!