Next.js

Documentation
Components
Getting started

This theme uses zero configuration Next.js framework which is based on React, Webpack and Babel. It allows you to make blazing fast web applications with possibility of server side rendering.

Biggest advantages
  • Pre-Rendering - Statically generated and server-rendered React applications have never been easier.
  • Static Exporting - Exporting a static site with Next.js is as easy as a single command.
  • Zero Configuration - Automatic code splitting, filesystem based routing, hot code reloading and universal rendering.
  • Fully Extensible - Complete control over Babel and Webpack. Customizable server, routing and next-plugins.
  • Optimized & Ready for Production - Optimized for a smaller build size, faster dev compilation and dozens of other improvements.

Find out more about Next.js at its website.

To use this theme, all you need to do is to install Node, theme's dependencies, and you're good to go.

1. Install Node

If you don't have Node installed on your machine, head to its official site and choose an appropriate installation for your system.

2. Install project's dependencies

This will install dependencies from theme's package.json file.

$ npm install
3. Run development enviroment

This will run a development task for Next.js. You're all set. 

$ npm run dev
Development

Running npm run dev in the theme's folder will start a local server instance on port 3000 to serve and refresh your pages as you edit.

Static Export

Running npm run export in the theme's folder makes /out folder with a static export of your website. Read more about Static HTML exports here.

To setup your project for static export, following configuration is needed.

next.config.js

{
  images: {
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // loader: "imgix", // Uncoment this line
    // path: "", // Uncoment this line
  },
  env: {
    production_type: "server", // Change variable to "static"
  },
  // trailingSlash: true, // Uncoment this line
},

Deployment

The easiest way to deploy your Next.js project is using Vercel platform. More about deploying Next.js and other hosting options here.

Production build

Running npm run build in the theme's folder makes /.next folder with optimized production build. Read more about production build here.

Data + Data Fetching

Theme uses static JSON files to feed data to the pages and components. You can fetch your own data from headless CMS or API. You can also simply edit sample JSON files located at /src/data folder for easy content editing.

Find out more about data fetching here.

Routing
File-system Based Router

Next.js has a file-system based router built on the concept of pages.

When a file is added to the pages directory it's automatically available as a route.

The files inside the pages directory can be used to define most common patterns.

Dynamic Routing

Defining routes by using predefined paths is not always enough for complex applications. In Next.js you can add brackets to a page ([param]) to create a dynamic route (a.k.a. url slugs, pretty urls, and others).

We demonstrate this concept in blog/[slug].js, see it live here.

Based on a blog.json file containing data about all our blog posts (simulating access to API), we create all blog post URLs, and their content during the build time. The main functions to achieve this behavior are getStaticPaths (docs) and getStaticProps (docs). More about Dynamic Routes here.

Built-In CSS Support

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.

Find out more about working with CSS in Next.js here.