Next.js generic landing page template

A generic landing page template, built in Next.js (React) with static HTML export.

Can be used as:

1. Hosted Next.js site
2. Use yarn export to export pure HTML pages

Note: if you need a template for a complete PWA web app (with database etc) in Next.js, check out nextjs-pwa-firebase-boilerplate.

Support this project

Did you or your company find nextjs-generic-landing-page useful? Please consider giving a small donation, it helps me spend more time on open-source projects:

Why is this awesome?

This is a great template for a any project where you want React (with static site generation (SSG) or server-side rendering (SSR), powered by Next.js) as frontend. Lightning fast, all JavaScript.

• Great starting point for a landing page or simple website.
• Use yarn export to export pure HTML pages.
• Prepared for PWA features with a manifest.json.
• Can use SSG getStaticProps or SSR getServerSideProps.
• Easy to style the visual theme using CSS (e.g. using Design Profile Generator).
• Google Analytics and google-site-verification support (see config/config.js).
• Flexible configuration with config/config.js and .env.local file.
• Code linting and formatting with StandardJS (yarn lint/yarn fix).
• Unit testing with Jasmine (yarn unit, not yet included).
• Good page speed, see Lighthouse score:

Demo

Demo of nextjs-generic-landing-page hosted on Vercel

How to use

How to use 1: Clone the entire project

Clone this repository:

git clone https://github.com/tomsoderlund/nextjs-generic-landing-page.git [MY_APP]

Remove the .git folder (since you want to create a new repository) and other template stuff:

rm -rf .git docs/ public/features/*.jpg

Install dependencies:

cd [MY_APP]
yarn  # or npm install

Run:

yarn dev

Export static HTML:

yarn export

Test the static HTML:

cd out
python -m SimpleHTTPServer

How to use 2: Import just the components you need

https://www.npmjs.com/package/nextjs-generic-landing-page

yarn add nextjs-generic-landing-page  # or npm install nextjs-generic-landing-page

Then in your code:

import { Headline, Video } from 'nextjs-generic-landing-page'

<Headline
  title='My Website'
  description='Maybe the best website ever'
/>

See pages/index.js for examples on how to use the components.

Styling

Modify public/theme.css (public/app.css is more structural).

You can add fonts in components/page/PageHead.js.

Removing landing page components

If you want to use this as a Next.js boilerplate, without landing page stuff:

rm pages/standalone.js
rm components/index.js
rm -rf components/landing
rm -rf components/social

Update the NPM package

yarn publish  # will run 'yarn prepublish' before

Todo:

• Make it look more like https://airfocus.com/
• Components
  • Title/Tagline
  • Footer
  • Signup form
  • Image
  • Video
  • 3 features
  • Google Analytics with page & event logging
  • Pricing/product comparison table
  • Testimonials (3 people)
  • Login link
  • React Social Share & Follow
  • Try the app (interactive)