{"id":14961224,"url":"https://github.com/hakkaofdev/ts-next-chakra-motion-kit","last_synced_at":"2025-10-24T20:31:19.836Z","repository":{"id":37364197,"uuid":"452057558","full_name":"HakkaOfDev/ts-next-chakra-motion-kit","owner":"HakkaOfDev","description":"Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...","archived":false,"fork":false,"pushed_at":"2023-01-04T13:04:35.000Z","size":226,"stargazers_count":55,"open_issues_count":2,"forks_count":11,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T04:03:27.310Z","etag":null,"topics":["chakra","chakra-ui","framer-motion","i18next","internationalization","nextjs","nextjs-starter","seo","seo-optimization","starter-kit","template","typescript","typescript-boilerplate"],"latest_commit_sha":null,"homepage":"https://ts-next-chakra-motion-kit.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HakkaOfDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-25T22:04:55.000Z","updated_at":"2024-09-01T12:31:41.000Z","dependencies_parsed_at":"2023-02-02T13:17:42.039Z","dependency_job_id":null,"html_url":"https://github.com/HakkaOfDev/ts-next-chakra-motion-kit","commit_stats":null,"previous_names":[],"tags_count":4,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakkaOfDev%2Fts-next-chakra-motion-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakkaOfDev%2Fts-next-chakra-motion-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakkaOfDev%2Fts-next-chakra-motion-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HakkaOfDev%2Fts-next-chakra-motion-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HakkaOfDev","download_url":"https://codeload.github.com/HakkaOfDev/ts-next-chakra-motion-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238035385,"owners_count":19405682,"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":["chakra","chakra-ui","framer-motion","i18next","internationalization","nextjs","nextjs-starter","seo","seo-optimization","starter-kit","template","typescript","typescript-boilerplate"],"created_at":"2024-09-24T13:24:13.873Z","updated_at":"2025-10-24T20:31:19.255Z","avatar_url":"https://github.com/HakkaOfDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/hakkaofdev/ts-next-chakra-motion-kit\"\u003e\n    \u003ch1 align=\"center\"\u003eTypescript Next.js Chakra-UI Framer-Motion Starter Kit\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eStart with a powerful template ⚡️\u003c/h2\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Github Stars\" src=\"https://badgen.net/github/stars/hakkaofdev/ts-next-chakra-motion-kit\"/\u003e\n  \u003cimg alt=\"Code quality\" src=\"https://api.codiga.io/project/30800/score/svg\"/\u003e\n  \u003cimg alt=\"Code grade\" src=\"https://api.codiga.io/project/30800/status/svg\"/\u003e\n  \u003cimg alt=\"Top languages\" src=\"https://img.shields.io/github/languages/top/hakkaofdev/ts-next-chakra-motion-kit\"/\u003e\n  \u003cimg alt=\"Opensource License\" src=\"https://img.shields.io/badge/licence-OPENSOURCE-green\"/\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n\u003ch1 align='center'\u003eTable of contents\u003c/h1\u003e\n\n- Getting started\n- Paths \u0026 Files\n- Useful dependencies (`Important`)\n- Components\n- Internationalization\n- Theme\n- Framer Motion\n- SEO\n\n\u003cbr /\u003e\n\n### See a DEMO [here](https://ts-next-chakra-motion-kit.vercel.app/).\n\n\u003ch2 align='center'\u003eGetting started\u003c/h2\u003e\n\nFirst, you need to open a `Terminal` and clone this repo by using :\n\n```bash\ngit clone https://github.com/hakkaofdev/ts-next-chakra-motion-kit\n```\n\nEnter to the folder :\n\n```bash\ncd ./ts-next-chakra-motion-kit\n```\n\nAnd install dependencies\n\n```bash\nnpm install\n```\n\nFinally, run in dev :\n\n```bash\nnpm run dev\n```\n\n\u003ch2 align='center'\u003ePaths \u0026 Files\u003c/h2\u003e\n\nThis is the main structure of the template.\n\n### Structure\n\n```text\n.\n├── data\n├── .env\n├── .eslintrc.json\n├── next-env.d.ts\n├── next-sitemap.js\n├── package.json\n├── .prettierrc.json\n├── tsconfig.json\n├── internationalization\n│  ├── i18n.ts\n│  └── locales\n├── pages\n│  ├── 404.tsx\n│  ├── _app.tsx\n│  ├── _document.tsx\n│  └── index.tsx\n├── public\n│  └── assets\n├── src\n│  ├── components\n│  ├── constants.ts\n│  ├── providers\n│  ├── theme\n│  ├── types\n│  └── utils\n```\n\n- You can upload your constants like URL's in the `constants.ts` in `.src/`.\n- Dependencies can be found in `package.json`.\n- Your types in `./src/types`.\n- The theme system of Chakra-UI in `./src/theme/`.\n- Components in `./src/components/`.\n- Pages in `./pages/`\n- Locales for your langs in `./internationalization/locales/`.\n- Default `env` variables in `.env`.\n\n### Customs Paths\n\nFor imports you can use this list :\n\n- @/components/\\*\n- @/types/\\*\n- @/utils/\\*\n- @/data/\\*\n- @/providers/\\*\n- @/internationalization/\\*\n- @/theme\n\nEach imports refer to the specific folder.\n\n\u003ch2 align='center'\u003eUseful Dependencies\u003c/h2\u003e\n\nBy default, I installed a list of useful dependencies.\n\n- `react-use` in `v17.4.0` for useful hooks.\n- `react-intersection-observer` in `v9.4.1` for advanced animations. You can find an example of use [here](https://github.com/HakkaOfDev/hakkaofdev.fr/blob/main/src/components/scene/index.tsx).\n- `prettier` in `v2.8.1` for formatting code.\n- `eslint` in `v8.31.0` for errors.\n- `@react-icons` in `v4.7.1` for icons. [React-Icons](https://react-icons.github.io/react-icons/)\n- `Fonts` to [fontsource.org](https://fontsource.org/fonts).\n\n\u003ch2 align='center'\u003eComponents\u003c/h2\u003e\n\n- `\u003cThemeButton /\u003e` in `.src/components/theme-button/index.tsx`.\n- `\u003cLanguagesButton /\u003e` in `.src/components/languages-button/index.tsx`.\n- `\u003cPageLayout /\u003e` in `.src/components/page-layout/index.tsx`.\n\n\u003ch2 align='center'\u003eInternationalization\u003c/h2\u003e\n\n### Default config\n\nShe can be found in `./internationalization/i18n.ts`\n\n```typescript\nconst resources = {\n  us: {\n    translation: en_US,\n  },\n  fr: {\n    translation: fr_FR,\n  },\n};\n\nexport const availableLanguages = Object.keys(resources);\n\nconst options = {\n  order: ['localStorage', 'navigator'],\n};\n\ni18n\n  .use(XHR)\n  .use(LanguageDetector)\n  .use(initReactI18next)\n  .init({\n    resources,\n    fallbackLng: 'us',\n    detection: options,\n    supportedLngs: ['us', 'fr'],\n    interpolation: {\n      escapeValue: false,\n    },\n    debug: false,\n  });\n```\n\n### Add a new lang\n\nAdd it in `ressources` like others.\nCreate un folder with prefix in `./internationalization/locales/` like others.\nAnd customize the constant in your `.ts` file.\n\n```typescript\nexport const en_US = {\n  home: {\n    title: 'Home',\n  },\n};\n```\n\n### How to use it\n\n```typescript\nimport { Text } from '@chakra-ui/react';\nimport { useTranslation } from 'react-i18next';\n\nconst Example = () =\u003e {\n  const { t } = useTranslation();\n\n  return \u003cText align='center'\u003e{t('home.title')}\u003c/Text\u003e;\n};\n```\n\n\u003ch2 align='center'\u003eTheme\u003c/h2\u003e\n\nYou can find a complete documentation [here](https://chakra-ui.com/docs/theming/customize-theme).\n\n\u003ch2 align='center'\u003eFramer Motion\u003c/h2\u003e\n\n`Framer Motion` was directly installed when `@chakra-ui/react` is added as dependency.\n\n### Use Framer Motion with Chakra-UI\n\nFirst, you have to declare your variants :\n\n```typescript\nimport { Variants } from 'framer-motion';\n\nconst variants: Variants = {\n  hidden: {\n    opacity: 0,\n    x: 0,\n    y: -40,\n    transition: { duration: 0.4, type: 'easeOut' },\n  },\n  enter: {\n    opacity: 1,\n    x: 0,\n    y: 0,\n    transition: { duration: 0.4, type: 'easeOut' },\n  },\n  exit: {\n    opacity: 0,\n    x: -0,\n    y: 40,\n    transition: { duration: 0.4, type: 'easeOut' },\n  },\n};\n```\n\nDeclare your custom container, a `MotionContainer` !\n\n```typescript\nimport { Container, ContainerProps } from '@chakra-ui/react';\nimport { motion } from 'framer-motion';\n\nconst MotionContainer = motion\u003cContainerProps\u003e(Container);\n```\n\nAnd use it as a component :\n\n```typescript\n\u003cMotionContainer\n  display='flex'\n  maxW='container.lg'\n  minH={{ base: 'auto', md: '100vh' }}\n  px={{ base: 4, lg: 8 }}\n  initial='hidden'\n  animate='enter'\n  exit='exit'\n  variants={variants}\n  centerContent\n\u003e\n  {children}\n\u003c/MotionContainer\u003e\n```\n\nYou can find my article with an another example [here](https://www.hakkaofdev.fr/blog/my-first-typescript-next-chakra-website).\n\n\u003ch2 align='center'\u003eSEO\u003c/h2\u003e\n\nThe `Search Engine Optimization (SEO)` is important on any websites.\n\nFor this template, I used `next-seo` and `next-sitemap`.\n\n### Use the SEO\n\nFor that you've a `PageLayout` component with SEO.\nThe default config for SEO is that:\n\n```typescript\n\u003cNextSeo\n  title={title + ' | ' + process.env.siteName}\n  description={description}\n  twitter={{\n    cardType: 'summary_large_image',\n    handle: '@hakkaofdev',\n  }}\n  openGraph={{\n    url: 'https://www.hakkaofdev.fr',\n    title: title + ' | ' + process.env.siteName,\n    description: description,\n    locale: 'en_US',\n    images: [\n      {\n        url: 'https://www.hakkaofdev.fr/assets/images/social.png',\n        width: 1200,\n        height: 630,\n        alt: 'Alexandre Gossard',\n        type: 'image/png',\n      },\n    ],\n  }}\n  additionalLinkTags={[\n    {\n      rel: 'icon',\n      href: 'https://www.hakkaofdev.fr/favicon.ico',\n    },\n  ]}\n/\u003e\n```\n\nJust use it like this:\n\n```typescript\nimport PageLayout from '@/components/page-layout';\n\nreturn (\n  \u003cPageLayout title='This is a template' description='Created by @HakkaOfDev'\u003e\n    {children}\n  \u003c/PageLayout\u003e\n);\n```\n\n### Sitemap\n\nDefault site-map.\n\n```javascript\nmodule.exports = {\n  siteUrl: process.env.baseURL,\n  changefreq: 'daily',\n  priority: 0.7,\n  sitemapSize: 5000,\n  generateRobotsTxt: true,\n};\n```\n\nYou have to `npm run postbuild` to generate it.\n\n\u003e Don't hesitate to contact me if you want advices or if you have any questions or post an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakkaofdev%2Fts-next-chakra-motion-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhakkaofdev%2Fts-next-chakra-motion-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakkaofdev%2Fts-next-chakra-motion-kit/lists"}