NextJS Examples | Starter

October 10, 2019

NextJS is a React framework for server side rendering. To understand the benefits of server side rendering, check out client side vs server side rendering first.

Using NextJS, you can skip the configuration headaches associated with traditional React apps...

You don't need to worry about configuring Babel or Webpack.

You don't need to worry about installing react or react-dom.

You don't need to worry about implementing a server like Express.

Instead, you simply run:

npx create-next-app your-app

and all of that gets handled for you.

Note: npx commands only work with npm versions > 5.2

How NextJS Works

Creating a NextJS app with the CLI generates the following folder structure...

├── components
   └── nav.js
├── pages
    └── index.js
├── public
├── next.config.js
├── node_modules
├── package.json

Sharable components go in the components folder. Different pages like (Home, About, Contact) go in the pages folder.

Static assets go in the public folder. Custom configuration for webpack etc. goes in the next.config.js file.

Inside the package.json file, you'll see:

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

By simply running:

npm run dev

NextJS will run your app in development mode using Webpack under the hood.

Similarly, if you run:

npm run build

NextJS will package your app into an optimized .next folder so it is production ready.

Finally, running:

npm run start

will run the optimized output on the server. No deployment needed!

Creating pages with NextJS

The heart of NextJS magic is the folder structure. Any file you define under the pages folder will map to a route based on the name of the file.

If you create a about.js file like this...

const About = () => (
  <div><h1>About us</h1></div>
)
export default About

and place it under the pages directory pages like this...

├── pages
│   └── index.js
│   └── about.js

then when you run npm run dev and navigate to http://localhost:3000/about you'll see your "About" page.

Creating API endpoints with NextJS

Using this same folder "magic", you can create API endpoints with no configuration...

Let's say your app is an online book store. In addition to having different pages (about us, contact, etc) you'd have API endpoints for fetching data.

If you create a books.js file like this...

export default (req, res) => {
  res.setHeader('Content-Type', 'application/json')
  res.statusCode = 200
  res.end(JSON.stringify({ title: 'The Hobbit', author: 'Tolkien' }))
}

and place it under pages/api/ subdirectory like this...

├── pages
│   └── index.js
│   └── about.js
│   └── api/
│       └── books.js

then http://localhost:3000/api/books will return the following JSON response:

{
"title": "The Hobbit",
"author": "Tolkien"
}

It's important to remember that NextJS magic works based on the folder names. You MUST follow this structure for the routes to configure automatically. Using a subdirectory name other than api/ will not work!

Serving static files with NextJS

Images and other static assets are automatically configured with NextJS...

By placing an image some-image.png under a public folder like this...

├── public
       └── some-image.png

you can reference it like this:

<img src="/some-image.png" alt="some image" />

Customizing and extending NextJS

While NextJS abstracts away a lot of the configuration for you, you can still extend NextJS to work with any implementation.

Specifically the next.config.js file lets you specify configuration settings for webpack and other things that are "hidden from view".

For example, say you want disable the automatic routing generated from the pages directory. In the next.config.js file, you'd specify:

// next.config.js
module.exports = {
  useFileSystemPublicRoutes: false,
}

The Benefits of Using NextJS

If you don't use NextJS, you have to configure a lot of things manually. For example, without the magic of the pages directory, you'd have to manually configure a backend server to serve those pages...

On a similar note, you'd also have to configure that server to serve static assets like images etc. as well as configure the development environment for running a Webpack locally, etc.

Apart from saving you A LOT of configuration headaches, NextJS optimizes your code for performance.

For instance, NextJS automatically does server side rendering and indexing for every "page" you define under the pages directory.

NextJS also performs automatic code splitting so you aren't loading unnecessary modules / code with each page.

Using NextJS, you can also leverage client side rendering with the framework's built in <Link> component.

NextJS also offers built in CSS support and integrates nicely with Sass/Less.

Conclusion

NextJS lets you focus more on code and less on configuration. Things like Webpack, Babel, and Express, are automatically configured for you.

NextJS gives you both convenience and flexibility. While things come pre-configured, you can easily extend NextJS to work with your own Express implementation or customize Webpack etc.

Comment