The beautiful blog theme from Narative adapted by Tinia Labs for Next.js and Tailwind CSS with blazing fast performance and zero runtime CSS in JS.
With minimal styling and maximum features — including multiple homepage layouts, built-in social sharing and dark mode — Novela makes it easy to start publishing beautiful articles and stories with Next.js.
Novela is built by the team at Narative, updated by Tinia Labs to work on Next.js, and built for everyone that loves the web.
Special thanks to @jpvalery for helping maintain the original Gatsby version of Novela.
See tinialabs/next-theme-novela-tw for the actual theme files. This repository containers a starter kit that includes the theme files.
Features specific to Next.js over others Next.js examples
- Favicon generator Uses the
faviconspackage to generate favicons and manifests on all required platforms - Yaml config Put all your site config in one place in a site.yml file in your content folder
- All content colocated All content including images and markdown are colocated in the
contentfolders - No CMS required Keep all your blog articles and images under version control in Github or similar
- Image optimization Use Next.js runtime image optimization without needing to know the height and width of each image
- Image lazy loading and LQIP Use blurred image placeholders (similar to Medium) without an extra server roundtrip; lazy laod images when the images are ready to be shown in the viewport
- Fast performance Much faster build times than Gatsby for the exact same blog content and layout; >95 lighthouse scores in every category currently
- Simpler project structure Instead of multiple gatsby hooks, use Next.js intuitive /pages structure for a better developer experience
- Zero runtime CSS in JS While you can use Emotion or Styled Components easily, this version comes with Linaria for blazing fast zero runtime overhead
- Built in Theming We've removed the dependency on theme-ui for a lightweight theming solution that is CSS in JS independent (using React context)
- Built in Routing via Next.js We've removed the dependency on reach-router
- Google Fonts optimization High speed font preloading
See tinialabs/next-theme-novela-tw for the actual theme files. This repository containers a starter kit that includes the theme files.
See tinialabs/next-lib-content for logic that generates the blog articles from markdown and yaml files on disk.
Two Next.js plugins tinialabs/next-favicon-loader and tinialabs/next-meta-image-loader were hand-written to provide some of the Gatsby functionality in the original Novela theme and can now be used in any Next.js site.
npx create-next-app -e https://github.com/tinialabs/next-novela-tailwindgit clone [email protected]:tinialabs/next-novela-tailwind.git novela-site
cd novela-site
yarnOnce installed or cloned locally and all packages are installed you can begin developing your site.
# Run localhost
yarn dev
# Build your Next.js site
yarn buildTo learn more about adding Authors, Posts, and Site Metadata see:
This guide will take you through adding Novela to a new project. You do not require any Next.js starters or similar, but you can add Novela to an existing Next.js project.
You can also view the completed example repository.
# Create an empty directory and go into it
mkdir novela-site && cd novela-site
# Add all required dependencies
yarn add react react-dom next next-theme-novela-twOnce you've installed React, Next.js, and Novela you'll want to add your first Author and Post.
The recommended project structure for your content and site looks like this:
novela-site
├── .config
│ ├── .mdx-plugins.js
│ └── .next-sitemap.js
├── content
│ ├── authors
│ │ ├── avatars
│ │ │ └── avatar.jpg
│ │ └── authors.yml
│ └── posts
│ │ └── 2020-01-01-my-first-novela-post
│ │ ├── images
│ │ │ └── novela-hero.jpg
│ │ └── index.mdx
│ ├── theme
│ ├── favicon.png
│ └── site.yml
├── .meta
├── node_modules
├── babel-config.js
├── next-config.js
├── package.json
├── pages
├── public
└── tsconfg.json
You must add next-theme-novela-tw and next-lib-content as package.json dependencies or .meta sub-projects. We use the latter in all examples
We also require next-favicon-loader, next-image-meta-loader, next-svg-inline-loader and @twstyled/next as next.js plugins, twstyled for babel, and use next-compose-plugins to
add these to your next-config.js file. These generate the favicons/site manifest, as well as provide the ability to import images directly from the content tree right next to the assocated markdown, instead of the Next.js default of having to put them in the public folder.
// next-config.js
const { withPlugins } = require('next-compose-plugins');
module.exports = withPlugins(
[
require('next-favicon-loader'),
require('next-image-meta-loader'),
],
{
webpack: (config) => {
// custom webpack config here
return config
}
}
)Once you've setup the plugins in next-config.js and installed the theme proects you can start creating your first Posts. In order to create a Post you also need at least one Author.
In step 2 we created the folder structure of our project. We can now add an Author by populating /content/authors/authors.yml:
novela-site
└── content
└── authors
├── avatars
│ └── brotzky-avatar.jpg
└── authors.yml
In authors.yml add an Author. There must be at least one featured Author.
/content/authors/authors.yml:
- name: Dennis Brotzky
bio: |
Written by Dennis Brotzky who lives and works in Vancouver building useful things.
You should follow him on Twitter.
avatar: ./avatars/brotzky-avatar.jpg
featured: true
social:
- url: https://unsplash.com
- url: https://stackoverflow.com
- url: https://github.comOnce you have at least one Author defined in authors.yml you can add your first Post.
Start by creating a new folder in content/posts. You can name it anything you like but we recommend including the date at the front to organize your posts. Once you've created your folder you can add an index.mdx file and an images folder.
/content/posts/2020-01-01/index.mdx
---
title: Why Narative loves Next.js
author: Dennis Brotzky
date: 2019-04-27
hero: ./images/narative-gatsby-hero.jpg
excerpt: This is a love story about Narative and Next.js
---
# And then under the heading YML you can insert any MDX you like
# like headings, links, code, images, etc
# This will show up in the body of your post
# ...In order to configure the theme to properly generate the pages and meta tags you must add specific data to siteMetadata.
The fields that are unique to Novela are hero.heading, hero.maxWidth, and social.
Add your Site Metadata to the site.yml file.
// site.yml
---
title: Novela by Tinia Labs
name: Tinia Labs & Narative
siteUrl: https://novela.tinia.vercel.app/
description: This is my description that will be used in the meta tags and
important for search results
hero:
heading: Welcome to Novela, the simplest way to start publishing with Next.js.
maxWidth: 652
social:
- name: twitter
url: https://twitter.com/narative
- name: github
url: https://github.com/narative
- name: instagram
url: https://instagram.com/narative.co
- name: linkedin
url: https://www.linkedin.com/company/narative/
- name: dribbble
url: https://dribbble.com/narativestudio
blog:
copyrightYear: 2021
contentPosts: content/posts
contentAuthors: content/authors
basePath: /
authorsPage: true
pathPosts: 'a'
pathAuthors: 'authors'
pageLength: 6
sources:
local: true
contentful: false
manifest:
appName: Novela by Narative
appShortName: Novela
appDescription: Novela by Narative
start_url: /
background: "#fff"
theme_color: "#fff"
display: standalone
alwaysEmitFull: false
googleAnalytics:
trackingId: UA-118232427-3Once all steps have been completed you can run your site. In the root of your project run yarn dev.
If you ran into problems you can reference the example repository or create an issue.