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)