An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
6 Next JS Templates Tailwind CSS for 2022
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 12 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS
Landing Page Template built with Next JS 12+, 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.
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 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
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.
Original Link: https://dev.to/ixartz/6-next-js-template-tailwind-css-for-2022-2069
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To