---

Next.js Paper

Demo → To do

This is a nextjs port of the popular Hugo Paper theme by nanxiaobei

Motivation

While learning nextjs, I wanted to build a small website from scratch using the concepts I had learnt.

I had seen the hugo-paper theme before and really liked the minimal design of it.

So I decided to port this beautiful theme as a means of getting familiar with nextjs.

I am really thankful to nanxiaobei for encouraging me to port this theme.

It is pretty basic at the moment and may not have all the features of Hugo Paper as yet, but we will get there gradually.

Feel free to fork it, add in your suggestions and raise issues.

Getting started

1. Clone the repo
2. Personalize siteMetadata.js (site related information)

• Set siteUrl to http://localhost:3000 when developing locally or to your environment's url.

3. Run the development server (I prefer pnpm):

npm run dev
# or
yarn dev
# or
pnpm dev

4. Open http://localhost:3000 with your browser to see the result.
5. Feel free to add some blogposts in data/blogPosts directory.

Features

• Next.js with Typescript
• Tailwind CSS
• Frontmatter parsing using gray-matter
• Markdown to html using micromark and GitHub flavoured markdown using micromark-extension-gfm
• Light and dark theme
• Pagination for Blogs
• Support for tags - each unique tag will be its own page

Extend / Customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.

app - pages to route to. Read the Next.js documentation for more information.

app/components - contains all the components used in the site.

data/headerNavLinks.js - navigation links.

data/logo.svg - replace with your own logo.

data/blogPosts - replace with your own blog posts.

public - store assets such as images and favicons.

tailwind.config.ts- tailwind configuration.

css/main.css - tylesheet which can be modified to change the overall look and feel of the site.

next.config.mjs - configuration related to Next.js.

Guides followed

Below are some of the helpful guides and resources I followed while learning

• Next.JS Learn
• tailwind-nextjs-starter-blog
• Creating a markdown powered blog
• Sorting markdown files from frontmatter
• Creating a custom 404 page in Next.JS

Todo

• Cache fetching of all blog posts.
• Author page which lists all articles by an author.
• Site wide search.
• Many more..