Starting a new project is hard and one the most important things is to build a landing page. A really important steps before launching any projects.
Currently, one of most trendy framework in JavaScript ecosystem is Next JS. I use Next JS in JAMStack mode and Tailwind CSS to save costs and time.
So, I have built several landing pages for my products and at the end I was reinvent the wheel all the time by building several landing pages from scratch using Next JS 12 and Tailwind CSS 3.
I thought it was great to build beautiful templates with the best developer experience. So, I open sourced my landing page template:
ixartz
/
Next-JS-Landing-Page-Starter-Template
๐ Free NextJS Landing Page Template written in Tailwind CSS 3 and TypeScript โก๏ธ Made with developer experience first: Next.js 14 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS
๐ Landing Page theme written in Next.js, Tailwind CSS and TypeScript โก๏ธ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.
Clone this project and use it to create your own Next.js project. You can check a Next js templates demo.
Sponsors
DEMO
Check out our live demo.
Features
Developer experience first:
- ๐ฅ Next.js for Static Site Generator
- ๐จ Integrate with Tailwind CSS
- ๐
PostCSS for processing Tailwind CSS and integrated to
styled-jsx
- ๐ Type checking TypeScript
- โ Strict Mode for TypeScript and React 18
- โ๏ธ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
- ๐ Code Formatter with Prettier
- ๐ฆ Husky for Git Hooks
- ๐ซ Lint-staged for running linters on Git staged files
- ๐ VSCode configuration: Debug, Settings, Tasks andโฆ
You can checkout the YouTube video for a demo:
Or, you can visualize the Next JS Tailwind Landing Page live demo.
If you want to see the code, you browse Next JS Lading Page Template GitHub
๐ฅ Next.js 12
๐จ styled with Tailwind CSS 3
๐
PostCSS for processing Tailwind CSS and integrated to styled-jsx
๐ Type checking TypeScript
โ
Strict Mode for TypeScript and React 17
โ๏ธ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
๐ Code Formatter with Prettier
๐ฆ Husky for Git Hooks
๐ซ Lint-staged for running linters on Git staged files
๐ VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
๐ค SEO metadata, JSON-LD and Open Graph tags with Next SEO
โ๏ธ Bundler Analyzer
๐ฑ๏ธ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
๐ Include a FREE theme
๐ฏ Maximize lighthouse score
Built-in feature from Next.js:
โ Minify HTML & CSS
๐จ Live reload
โ
Cache busting
You can also checkout my other Next JS Tailwind Template:
Next JS Tailwind Theme
Next JS Tailwind Theme - More info
Next JS Tailwind Dashboard Template
Next JS Tailwind Dashboard Template - More info
Next JS Tailwind Landing Page Theme
Next JS Tailwind Landing Page Theme - More info
Next JS Tailwind Landing Page
Next JS Tailwind Landing Page - More info
Next JS Tailwind Landing Page Template
Next JS Tailwind Landing Page Template - More info
Disclamer
I'm the maker of all these 7 themes and I have learned so much by making these themes. I'll definitely share my experience with tutorials and articles.
Top comments (0)