{"id":13624319,"url":"https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template","last_synced_at":"2025-04-15T21:30:33.107Z","repository":{"id":37247530,"uuid":"353086033","full_name":"ixartz/Next-JS-Landing-Page-Starter-Template","owner":"ixartz","description":"🚀 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","archived":false,"fork":false,"pushed_at":"2024-06-29T20:49:10.000Z","size":1492,"stargazers_count":1859,"open_issues_count":1,"forks_count":619,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-29T15:17:41.718Z","etag":null,"topics":["boilerplate","landing-page","landing-pages","nextjs","nextjs-boilerplate","nextjs-starter","nextjs-template","nextjs-typescript","starter","tailwind","tailwind-css","tailwind-css-template","tailwind-css-theme","tailwind-kit","tailwindcss","tailwindcss-starter-kit","tailwindcss-v2","templates","themes","typescript"],"latest_commit_sha":null,"homepage":"https://creativedesignsguru.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ixartz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ixartz","custom":["https://donate.stripe.com/7sI5m5146ehfddm7tj","https://nextlessjs.com"]}},"created_at":"2021-03-30T17:30:06.000Z","updated_at":"2024-10-29T01:46:00.000Z","dependencies_parsed_at":"2024-09-17T14:02:07.868Z","dependency_job_id":"79ef0555-f91e-4e79-a7fb-1c5fc1893946","html_url":"https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template","commit_stats":{"total_commits":53,"total_committers":3,"mean_commits":"17.666666666666668","dds":0.05660377358490565,"last_synced_commit":"04f594a1066abe0d6033c21297ae4f467e7e9081"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ixartz/Next-js-Boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixartz%2FNext-JS-Landing-Page-Starter-Template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixartz%2FNext-JS-Landing-Page-Starter-Template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixartz%2FNext-JS-Landing-Page-Starter-Template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixartz%2FNext-JS-Landing-Page-Starter-Template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ixartz","download_url":"https://codeload.github.com/ixartz/Next-JS-Landing-Page-Starter-Template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223685180,"owners_count":17185795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","landing-page","landing-pages","nextjs","nextjs-boilerplate","nextjs-starter","nextjs-template","nextjs-typescript","starter","tailwind","tailwind-css","tailwind-css-template","tailwind-css-theme","tailwind-kit","tailwindcss","tailwindcss-starter-kit","tailwindcss-v2","templates","themes","typescript"],"created_at":"2024-08-01T21:01:41.322Z","updated_at":"2025-04-15T21:30:33.095Z","avatar_url":"https://github.com/ixartz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ixartz","https://donate.stripe.com/7sI5m5146ehfddm7tj","https://nextlessjs.com"],"categories":["TypeScript","boilerplate"],"sub_categories":[],"readme":"# Landing Page Template built with Next JS 14+, Tailwind CSS 3 and TypeScript [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social\u0026label=Follow%20%40Ixartz)](https://twitter.com/ixartz)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://creativedesignsguru.com/demo/nextjs-landing-page/\"\u003e\u003cimg src=\"public/assets/images/nextjs-landing-page-banner.png?raw=true\" alt=\"Next js starter banner\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n🚀 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.\n\nClone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/nextjs-landing-page/).\n\n## Sponsors\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://go.clerk.com/zGlzydF\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60\"\u003e\n          \u003cimg alt=\"Clerk – Authentication \u0026 User Management for Next.js\" src=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://www.coderabbit.ai?utm_source=next_js_starter\u0026utm_medium=github\u0026utm_campaign=next_js_starter_oss_2025\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/coderabbit-logo-dark.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/coderabbit-logo-light.svg?raw=true\"\u003e\n          \u003cimg alt=\"CodeRabbit\" src=\"public/assets/images/coderabbit-logo-light.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://sentry.io/for/nextjs/?utm_source=github\u0026utm_medium=paid-community\u0026utm_campaign=general-fy25q1-nextjs\u0026utm_content=github-banner-nextjsboilerplate-logo\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/sentry-white.png?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/sentry-dark.png?raw=true\"\u003e\n          \u003cimg alt=\"Sentry\" src=\"public/assets/images/sentry-dark.png?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://about.codecov.io/codecov-free-trial/?utm_source=github\u0026utm_medium=paid-community\u0026utm_campaign=general-fy25q1-nextjs\u0026utm_content=github-banner-nextjsboilerplate-logo\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/codecov-white.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/codecov-dark.svg?raw=true\"\u003e\n          \u003cimg alt=\"Codecov\" src=\"public/assets/images/codecov-dark.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://launch.arcjet.com/Q6eLbRE\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/arcjet-dark.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/arcjet-light.svg?raw=true\"\u003e\n          \u003cimg alt=\"Arcjet\" src=\"public/assets/images/arcjet-light.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://l.crowdin.com/next-js\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/crowdin-white.png?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/crowdin-dark.png?raw=true\"\u003e\n          \u003cimg alt=\"Crowdin\" src=\"public/assets/images/crowdin-dark.png?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" style=width=\"33%\"\u003e\n      \u003ca href=\"https://nextjs-boilerplate.com/pro-saas-starter-kit\"\u003e\n        \u003cimg src=\"public/assets/images/nextjs-boilerplate-saas.png?raw=true\" alt=\"Next.js SaaS Boilerplate with React\" /\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"mailto:contact@creativedesignsguru.com\"\u003e\n        Add your logo here\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### DEMO\n\n[![Nextjs Landing Page Template Screenshot](public/assets/images/nextjs-landing-page-screenshot.png?raw=true)](https://creativedesignsguru.com/demo/nextjs-landing-page/)\n\nCheck out our [live demo](https://creativedesignsguru.com/demo/nextjs-landing-page/).\n\n### Features\n\nDeveloper experience first:\n\n- 🔥 [Next.js](https://nextjs.org) for Static Site Generator\n- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)\n- 💅 PostCSS for processing Tailwind CSS and integrated to `styled-jsx`\n- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)\n- ✅ Strict Mode for TypeScript and React 18\n- ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals and Airbnb configuration)\n- 🛠 Code Formatter with [Prettier](https://prettier.io)\n- 🦊 Husky for Git Hooks\n- 🚫 Lint-staged for running linters on Git staged files\n- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript\n- 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO\n- ⚙️ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)\n- 🖱️ One click deployment with Netlify (or manual deployment to any hosting services)\n- 🌈 Include a FREE theme\n- 💯 Maximize lighthouse score\n\nBuilt-in feature from Next.js:\n\n- ☕ Minify HTML \u0026 CSS\n- 💨 Live reload\n- ✅ Cache busting\n\n### Included Components\n\n- Navbar\n- Hero\n- Features\n- CTA banner\n- Footer\n\nFind more components in our [premium NextJS themes](https://creativedesignsguru.com/category/nextjs/).\n\n### Philosophy\n\n- Minimal code\n- SEO-friendly\n- 🚀 Production-ready\n\n### Requirements\n\n- Node.js and npm\n\n### Getting started\n\nRun the following command on your local environment:\n\n```\ngit clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name\ncd my-project-name\nnpm install\n```\n\nThen, you can run locally in development mode with live reload:\n\n```\nnpm run dev\n```\n\nOpen http://localhost:3000 with your favorite browser to see your project. For your information, Next JS need to take some time to compile the project for your first time.\n\n```\n.\n├── README.md            # README file\n├── next.config.js       # Next JS configuration\n├── public               # Public folder\n│   └── assets\n│       └── images       # Image used by default template\n├── src\n│   ├── background       # Atomic background component\n│   ├── button           # Atomic button component\n│   ├── cta              # Atomic cta component\n│   ├── feature          # Atomic feature component\n│   ├── footer           # Atomic footer component\n│   ├── hero             # Atomic hero component\n│   ├── layout           # Atomic layout component\n│   ├── navigation       # Atomic navigation component\n│   ├── pages            # Next JS pages\n│   ├── styles           # PostCSS style folder with Tailwind\n│   ├── templates        # Default template\n│   └── utils            # Utility folder\n├── tailwind.config.js   # Tailwind CSS configuration\n└── tsconfig.json        # TypeScript configuration\n```\n\n### Customization\n\nYou can easily configure the theme. Please change the following file:\n\n- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your favicon, you can generate from https://favicon.io/favicon-converter/\n- `src/styles/global.css`: your CSS file using Tailwind CSS\n- `utils/AppConfig.ts`: configuration file\n- `src/pages/index.tsx`: the index page of the theme that uses the `Base` component\n- `src/template/Base.tsx`: the `Base` component using component blocks\n- `src/templates/*`: the list of component blocks\n- `src/*`: other folders in src are the atomic components used by components blocks\n\nHere is the layer:\n\n- the entry point: `index.tsx` in `src/pages`\n- the `Base` template: `Base.tsx` in `src/templates`\n- use component blocks from `src/templates/*`\n- use atomic components from `src/*`\n\n### Deploy to production\n\nYou can see the results locally in production mode with:\n\n```\n$ npm run build\n$ npm run start\n```\n\nThe generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).\n\nYou can create an optimized production build with:\n\n```\nnpm run build-prod\n```\n\nNow, your theme is ready to be deployed. All generated files are located at `out` folder, which you can deploy with any hosting service.\n\n### Deploy to Netlify\n\nClone this repository on own GitHub account and deploy to Netlify:\n\n[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template)\n\n### VSCode information (optional)\n\nIf you are VSCode users, you can have a better integration with VSCode by installing the suggested extension in `.vscode/extension.json`. The starter code comes up with Settings for a seamless integration with VSCode. The Debug configuration is also provided for frontend and backend debugging experience.\n\nPro tips: if you need a project wide type checking with TypeScript, you can run a build with \u003ckbd\u003eCmd\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eB\u003c/kbd\u003e on Mac.\n\n### Contributions\n\nEveryone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.\n\n### License\n\nLicensed under the MIT License, Copyright © 2024\n\nSee [LICENSE](LICENSE) for more information.\n\n## Sponsors\n\n\u003ctable width=\"100%\"\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://go.clerk.com/zGlzydF\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/6fb61971-3bf1-4580-98a0-10bd3f1040a2\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60\"\u003e\n          \u003cimg alt=\"Clerk – Authentication \u0026 User Management for Next.js\" src=\"https://github.com/ixartz/SaaS-Boilerplate/assets/1328388/f80a8bb5-66da-4772-ad36-5fabc5b02c60\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://www.coderabbit.ai?utm_source=next_js_starter\u0026utm_medium=github\u0026utm_campaign=next_js_starter_oss_2025\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/coderabbit-logo-dark.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/coderabbit-logo-light.svg?raw=true\"\u003e\n          \u003cimg alt=\"CodeRabbit\" src=\"public/assets/images/coderabbit-logo-light.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://sentry.io/for/nextjs/?utm_source=github\u0026utm_medium=paid-community\u0026utm_campaign=general-fy25q1-nextjs\u0026utm_content=github-banner-nextjsboilerplate-logo\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/sentry-white.png?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/sentry-dark.png?raw=true\"\u003e\n          \u003cimg alt=\"Sentry\" src=\"public/assets/images/sentry-dark.png?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n      \u003ca href=\"https://about.codecov.io/codecov-free-trial/?utm_source=github\u0026utm_medium=paid-community\u0026utm_campaign=general-fy25q1-nextjs\u0026utm_content=github-banner-nextjsboilerplate-logo\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/codecov-white.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/codecov-dark.svg?raw=true\"\u003e\n          \u003cimg alt=\"Codecov\" src=\"public/assets/images/codecov-dark.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://launch.arcjet.com/Q6eLbRE\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/arcjet-dark.svg?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/arcjet-light.svg?raw=true\"\u003e\n          \u003cimg alt=\"Arcjet\" src=\"public/assets/images/arcjet-light.svg?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"https://l.crowdin.com/next-js\"\u003e\n        \u003cpicture\u003e\n          \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"public/assets/images/crowdin-white.png?raw=true\"\u003e\n          \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"public/assets/images/crowdin-dark.png?raw=true\"\u003e\n          \u003cimg alt=\"Crowdin\" src=\"public/assets/images/crowdin-dark.png?raw=true\"\u003e\n        \u003c/picture\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" style=width=\"33%\"\u003e\n      \u003ca href=\"https://nextjs-boilerplate.com/pro-saas-starter-kit\"\u003e\n        \u003cimg src=\"public/assets/images/nextjs-boilerplate-saas.png?raw=true\" alt=\"Next.js SaaS Boilerplate with React\" /\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr height=\"187px\"\u003e\n    \u003ctd align=\"center\" width=\"33%\"\u003e\n      \u003ca href=\"mailto:contact@creativedesignsguru.com\"\u003e\n        Add your logo here\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\nMade with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com) [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social\u0026label=Follow%20%40Ixartz)](https://twitter.com/ixartz)\n\n[![Sponsor Next JS Boilerplate](https://cdn.buymeacoffee.com/buttons/default-red.png)](https://github.com/sponsors/ixartz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixartz%2FNext-JS-Landing-Page-Starter-Template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fixartz%2FNext-JS-Landing-Page-Starter-Template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixartz%2FNext-JS-Landing-Page-Starter-Template/lists"}