Next.js

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
Static Exporting
Zero Configuration
Fully Extensible
Optimized & Ready for Production

Find out more about Next.js at project 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

4. Run production build

This task builds optimized application for production usage which you can find in /.next folder at the root of your project

$ npm run build

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.

Production build

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

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

Easiest way to deploy your project is using Vercel platform. More about deploying Next.js app here.

Data

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.