Skip to content
SEO-Forward NextJs Starter Boilerplate
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
.vscode
components
pages
public
scripts
.gitignore
LICENSE
README.md
next-seo.config.js
next.config.js
package-lock.json
package.json
postcss.config.js
routes.js
server.js

README.md

Next.js Starter Kit

A mildly opinionated, sort of barebones, SEO-forward Next.js boilerplate created by Ekom Enyong.

Last updated Mar 4, 2020

Contents

Nextjs Starter Features

  • No Express.js
  • SASS/SCSS, CSS autoprefixer and minimization
  • Load and optimize images (png, jpg, jpeg, and svg)
  • Import local fonts with next-fonts
  • Pretty routes with next-routes
  • Manage on-page SEO easier with next-seo
  • Included robots.txt file and dynamically generated static sitemap
  • Next.js and all the cool stuff that comes with it!
  • MDX Blog Template (coming soon)
  • User Authentication (session, sign in/sign out — coming soon)
  • User Profile (profile picture, name, bio — coming soon)
  • User Account (email verification, password change/password reset — coming soon)

Quick Start

  • Clone or download this repository.
  • Run npm install or npm i
  • Configure your ./next-seo.config.js file
  • Update default SEO options and JSON-LD schema data in /pages/index.js and /pages/about.js pages.
  • Edit your favicon in /pages/_document.js
  • Run npm start
  • 🚀Make your own SEO-friendly Next.js app!

Motivation

For nearly a decade, I've been a digital marketer, specifically an SEO professional but a few years ago, I started my self-taught developer journey. As I got heavily into Javascript and chose to take up ReactJS, I realized that many websites, or web apps rather, were not SEO-friendly.

If you have no digital marketing background, you may not understand why that is an issue or what it even means, however, I can assure you, it means a LOT. 😅 Especially when you're building something that you want search engines, like G**gle or DuckDuckGo, to find.

I appreciated the various starter kits I've studied and used along my journey, so I wanted to create one to inspire the new or seasoned developer being asked to find or build an SEO-friendly ReactJS solution.

SEO-Features

  • Custom page titles & meta descriptions
  • Canonicalization
  • Meta-indexation
  • Open Graph information
  • Twitter Card
  • JSON-LD schema implementation

Dependencies

📦 Package 😄 Benefit/Description
Next.js Next.js is a framework for building SEO-friendly Server Side Rendering (SSR) ReactJS applications
autoprefixer to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
cross-env Run scripts that set and use environment variables across platforms
next-compose-plugins A cleaner API for enabling and configuring plugins for next.js
@zeit/next-sass Enable SASS to be used in Next.js application
cssnano Minimize CSS output on build
next-optimized-images Load and optimize images; in V2, must also install imagemin plugin for each image type
imagemin-mozjpeg Optimize .jpeg and .jpg images
imagemin-optipng Optimize .png images
imagemin-svgo Optimize .svg images
next-seo Next SEO is a plugin that makes managing your SEO easier in Next.js projects.
next-routes Easy to use universal dynamic routes for Next.js
next-fonts Import fonts in Next.js (woff, woff2, eot, ttf, otf & svg)

Edit Your Favicon

The favicon can be found here: /public/favicon.png. The link for the favicon can be updated in the <Head></Head> of the /pages/_document.js file.

Configuring Default SEO

Defaults are set in the next-seo.config.js file. These options will be applied in the <head></head> tag for every page you create. Feel free to take advantage of the defaults I've provided for you, add more options, or remove options you don't need.

For a complete list of options available to you and more information, visit: https://github.com/garmeeh/next-seo#nextseo-options

You can also completely delete the ./next-seo.config.js file if you would like to set your SEO on a per page basis without the default file. If you delete the ./next-seo.config.js file, you will also need to change the /pages/index.js and /pages/about.js files to use <NextSeo /> instead of <DefaultSeo {...SEO} />.

Default SEO Options

  • Replace DEFAULT_SEO_PAGE_TITLE to set your default Page Title
  • Replace DEFAULT_SEO_META_DESCRIPTION to set your default Meta Description
  • Replace DEFAULT_CANONICAL_URL (Ex: https://www.example.com)
  • noindex is set to false by default. All pages will be indexed.

Default Open Graph Options

  • Replace DEFAULT_OG_URL (Ex: https://www.example.com)
  • Replace DEFAULT_OG_TITLE
  • Replace DEFAULT_OG_DESCRIPTION
  • Replace DEFAULT_OG_IMG_URL (Serving from public folder; Ex: /images/site-logo.jpg)
  • Replace DEFAULT_OG_IMG_ALT_TEXT
  • Replace DEFAULT_OG_SITE_NAME

Default Twitter Card Options

  • Replace TWITTER_HANDLE (Ex: @thekarmicagency)
  • Replace TWITTER_SITE (Ex: @thekarmicagency)
  • Card Type is set to summary_large_image by default

JSON-LD Schema

The beauty of next-routes is the ability to also utilize JSON-LD schema. G**gle has a whole lot of information about JSON-LD structured data if you are unfamiliar.

On a per page basis, you can adjust or remove JSON-LD schema as needed. Below is the configurable code block found directly underneath the <React.Fragment> opening tag on each page.

<>
  <DefaultSeo
    {...SEO}
    title='This is the home page.'
    description=' Change this! You can continue to add and other options you need here.'
  // DefaultSeo is set in the next-seo.config.js file
  />
  <ArticleJsonLd
    url="https://example.com/article"
    title="Article Title"
    images={[
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg',
    ]}
    datePublished="2015-02-05T08:00:00+08:00"
    dateModified="2015-02-05T09:00:00+08:00"
    authorName="Author Name"
    publisherName="Publisher name"
    publisherLogo="https://www.example.com/images/publisher-logo.jpg"
    description="This is a mighty good description of this article."
  />
</>

JSON-LD Schema types

Supported JSON-LD schema types include Article, Blog, Product, LocalBusiness and more.

Uploading fonts

If you want to host local fonts, place them in the /public/fonts folder.

Then import the font using src="/fonts/THIS_IS_YOUR_LOCAL_FONT.woff".

Sitemap and Robots.txt

This boilerplate generates a static sitemap dynamically based on the pages in the /pages folder. The script for this is found here: /scripts/generate-sitemap.js.

The robots.txt file is located in the /public folder and by default allows all user-agents.

If you have externally hosted data or want to alter this script, please visit: https://masteringnextjs.com/sitemap-robots. This is a blog post written by Lee Robinson showing how to create a dynamic sitemap. Big thanks to @leeerob!

My sitemap doesn't exist!

  • Stop your server, run npm build and then run npm start.
  • If this still does not generate the sitemap at /public/sitemap.xml, please open an issue, and I will try and fix it as fast as I can!

What's Next? (pun maybe intended)

  • Adding an MDX Blog Template (coming soon)
  • User Authentication (session, sign in/sign out — coming soon)
  • User Profile (profile picture, name, bio — coming soon)
  • User Account (email verification, password change/password reset — coming soon)
You can’t perform that action at this time.