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 Template built with Next JS 14+, Tailwind CSS 3 and TypeScript 
🚀 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)