Next.js Generic Landing Page

nextjs-generic-landing-page is a free, open-source boilerplate for building landing pages and simple websites with Next.js, offering both hosted Next.js deployment and static HTML export through its yarn export command.

What is nextjs-generic-landing-page?

nextjs-generic-landing-page is a generic landing page template built in Next.js (React) that supports static site generation (SSG) with getStaticProps or server-side rendering (SSR) with getServerSideProps. It takes configuration from config/config.js and .env.local and outputs either a live Next.js site or pure HTML pages in an out directory after running yarn export. The project is created by Tom Soderlund and is also distributed as the npm package nextjs-generic-landing-page, which exposes React components like Headline and Video for import into other projects.

Key Features

• Static HTML export — Run yarn export to generate pure HTML in out/, deployable to any static hosting service without a Node runtime.
• Flexible configuration — Set site-wide values such as Google Analytics ID and google-site-verification from config/config.js and .env.local.
• PWA preparation — Ships with a manifest.json, making it ready for installable web app enhancements.
• Component library — Includes reusable components for a headline, signup form, image, video, a three-feature grid, pricing comparison table, testimonials, and social share/follow buttons.
• SSG/SSR support — Uses Next.js data-fetching methods to switch between statically generated and server-rendered pages.
• CSS theming — Visual theme is edited in public/theme.css; structural styles live in public/app.css, and fonts are added in components/page/PageHead.js.
• Code quality setup — StandardJS linting with yarn lint/yarn fix and a Jasmine unit test scaffold (yarn unit, noted as not yet included).
• Live demo — A running demo is hosted on Vercel at nextjs-generic-landing-page.vercel.app.

Who is it for?

nextjs-generic-landing-page is aimed at developers who want a React-based frontend without starting from scratch. A developer can clone the repository, remove the .git folder and sample assets, then run yarn dev to immediately work on a landing page. Teams that need static output can use yarn export and host the resulting HTML on any server. The npm package also suits developers who only want specific components, like a pricing table or video section, inside an existing Next.js app.

Use cases

• Startups launching a product page — Assemble a headline, signup form, feature grid, pricing table, and testimonials in a single template.
• Developers prototyping a simple website — Change copy and analytics settings through config/config.js without editing React components.
• Static site deployers — Generate an out/ folder of plain HTML and test it locally with python -m SimpleHTTPServer.

How does it work?

The README explains two usage paths. First, clone the entire project, remove template leftovers with rm -rf .git docs/ public/features/*.jpg, install dependencies via yarn, then run yarn dev for development or yarn export for static output. Second, install nextjs-generic-landing-page from npm and import individual components in your own code, with examples in pages/index.js.

FAQ

Is nextjs-generic-landing-page free?

Yes, it is an open-source template hosted on GitHub. The author also includes a Ko-Fi donation link for those who find the project useful.

Can I use this template for a full web app?

The README explicitly recommends nextjs-pwa-firebase-boilerplate for a complete PWA web app with a database. This template focuses on landing pages and simple websites.

How do I remove the landing page components?

You can delete pages/standalone.js, components/index.js, and the components/landing and components/social directories to strip it down to a plain Next.js boilerplate.

What does the npm package provide?

The nextjs-generic-landing-page npm package exports components such as Headline and Video that you can import into your own Next.js project, alongside a full example page.