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.
- 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
$ npm install
3. Run development enviroment
This will run a development task for Next.js. You're all set.
$ npm run dev
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.
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.
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.
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.
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
Find out more about working with CSS in Next.js here.