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.
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.
If you don't have Node installed on your machine, head to its official site and choose an appropriate installation for your system.
This will install dependencies from theme's package.json file.
$ npm installThis will run a development task for Next.js. You're all set.
$ npm run devRunning 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.
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.
...
{
images: {
deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
loader: "imgix", // needed for STATIC EXPORT
path: "", // needed for STATIC EXPORT
},
env: {
production_type: "server", // Change variable to "static" for STATIC EXPORT
},
trailingSlash: true // needed for STATIC EXPORT
},The easiest way to deploy your Next.js project is using Vercel platform. More about deploying Next.js and other hosting options here.
Running npm run build in the theme's folder makes /.next folder with optimized production build. Read more about production build here.
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.
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).
More about Dynamic Routes here.
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.