Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hakkaofdev/ts-next-chakra-motion-kit
Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...
https://github.com/hakkaofdev/ts-next-chakra-motion-kit
chakra chakra-ui framer-motion i18next internationalization nextjs nextjs-starter seo seo-optimization starter-kit template typescript typescript-boilerplate
Last synced: 7 days ago
JSON representation
Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...
- Host: GitHub
- URL: https://github.com/hakkaofdev/ts-next-chakra-motion-kit
- Owner: HakkaOfDev
- Created: 2022-01-25T22:04:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-04T13:04:35.000Z (over 1 year ago)
- Last Synced: 2024-09-24T12:56:40.836Z (9 days ago)
- Topics: chakra, chakra-ui, framer-motion, i18next, internationalization, nextjs, nextjs-starter, seo, seo-optimization, starter-kit, template, typescript, typescript-boilerplate
- Language: TypeScript
- Homepage: https://ts-next-chakra-motion-kit.vercel.app/
- Size: 221 KB
- Stars: 55
- Watchers: 3
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Typescript Next.js Chakra-UI Framer-Motion Starter Kit
Start with a powerful template ⚡️
Table of contents
- Getting started
- Paths & Files
- Useful dependencies (`Important`)
- Components
- Internationalization
- Theme
- Framer Motion
- SEO
### See a DEMO [here](https://ts-next-chakra-motion-kit.vercel.app/).
Getting started
First, you need to open a `Terminal` and clone this repo by using :
```bash
git clone https://github.com/hakkaofdev/ts-next-chakra-motion-kit
```
Enter to the folder :
```bash
cd ./ts-next-chakra-motion-kit
```
And install dependencies
```bash
npm install
```
Finally, run in dev :
```bash
npm run dev
```
Paths & Files
This is the main structure of the template.
### Structure
```text
.
├── data
├── .env
├── .eslintrc.json
├── next-env.d.ts
├── next-sitemap.js
├── package.json
├── .prettierrc.json
├── tsconfig.json
├── internationalization
│ ├── i18n.ts
│ └── locales
├── pages
│ ├── 404.tsx
│ ├── _app.tsx
│ ├── _document.tsx
│ └── index.tsx
├── public
│ └── assets
├── src
│ ├── components
│ ├── constants.ts
│ ├── providers
│ ├── theme
│ ├── types
│ └── utils
```
- You can upload your constants like URL's in the `constants.ts` in `.src/`.
- Dependencies can be found in `package.json`.
- Your types in `./src/types`.
- The theme system of Chakra-UI in `./src/theme/`.
- Components in `./src/components/`.
- Pages in `./pages/`
- Locales for your langs in `./internationalization/locales/`.
- Default `env` variables in `.env`.
### Customs Paths
For imports you can use this list :
- @/components/\*
- @/types/\*
- @/utils/\*
- @/data/\*
- @/providers/\*
- @/internationalization/\*
- @/theme
Each imports refer to the specific folder.
Useful Dependencies
By default, I installed a list of useful dependencies.
- `react-use` in `v17.4.0` for useful hooks.
- `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).
- `prettier` in `v2.8.1` for formatting code.
- `eslint` in `v8.31.0` for errors.
- `@react-icons` in `v4.7.1` for icons. [React-Icons](https://react-icons.github.io/react-icons/)
- `Fonts` to [fontsource.org](https://fontsource.org/fonts).
Components
- `` in `.src/components/theme-button/index.tsx`.
- `` in `.src/components/languages-button/index.tsx`.
- `` in `.src/components/page-layout/index.tsx`.
Internationalization
### Default config
She can be found in `./internationalization/i18n.ts`
```typescript
const resources = {
us: {
translation: en_US,
},
fr: {
translation: fr_FR,
},
};
export const availableLanguages = Object.keys(resources);
const options = {
order: ['localStorage', 'navigator'],
};
i18n
.use(XHR)
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
fallbackLng: 'us',
detection: options,
supportedLngs: ['us', 'fr'],
interpolation: {
escapeValue: false,
},
debug: false,
});
```
### Add a new lang
Add it in `ressources` like others.
Create un folder with prefix in `./internationalization/locales/` like others.
And customize the constant in your `.ts` file.
```typescript
export const en_US = {
home: {
title: 'Home',
},
};
```
### How to use it
```typescript
import { Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
const Example = () => {
const { t } = useTranslation();
return {t('home.title')};
};
```
Theme
You can find a complete documentation [here](https://chakra-ui.com/docs/theming/customize-theme).
Framer Motion
`Framer Motion` was directly installed when `@chakra-ui/react` is added as dependency.
### Use Framer Motion with Chakra-UI
First, you have to declare your variants :
```typescript
import { Variants } from 'framer-motion';
const variants: Variants = {
hidden: {
opacity: 0,
x: 0,
y: -40,
transition: { duration: 0.4, type: 'easeOut' },
},
enter: {
opacity: 1,
x: 0,
y: 0,
transition: { duration: 0.4, type: 'easeOut' },
},
exit: {
opacity: 0,
x: -0,
y: 40,
transition: { duration: 0.4, type: 'easeOut' },
},
};
```
Declare your custom container, a `MotionContainer` !
```typescript
import { Container, ContainerProps } from '@chakra-ui/react';
import { motion } from 'framer-motion';
const MotionContainer = motion(Container);
```
And use it as a component :
```typescript
{children}
```
You can find my article with an another example [here](https://www.hakkaofdev.fr/blog/my-first-typescript-next-chakra-website).
SEO
The `Search Engine Optimization (SEO)` is important on any websites.
For this template, I used `next-seo` and `next-sitemap`.
### Use the SEO
For that you've a `PageLayout` component with SEO.
The default config for SEO is that:
```typescript
```
Just use it like this:
```typescript
import PageLayout from '@/components/page-layout';
return (
{children}
);
```
### Sitemap
Default site-map.
```javascript
module.exports = {
siteUrl: process.env.baseURL,
changefreq: 'daily',
priority: 0.7,
sitemapSize: 5000,
generateRobotsTxt: true,
};
```
You have to `npm run postbuild` to generate it.
> Don't hesitate to contact me if you want advices or if you have any questions or post an issue.