Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...
Important
)First, you need to open a Terminal
and clone this repo by using :
git clone https://github.com/hakkaofdev/ts-next-chakra-motion-kit
Enter to the folder :
cd ./ts-next-chakra-motion-kit
And install dependencies
npm install
Finally, run in dev :
npm run dev
This is the main structure of the template.
.
├── 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
constants.ts
in .src/
.package.json
../src/types
../src/theme/
../src/components/
../pages/
./internationalization/locales/
.env
variables in .env
.For imports you can use this list :
Each imports refer to the specific folder.
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.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
Fonts
to fontsource.org.<ThemeButton />
in .src/components/theme-button/index.tsx
.<LanguagesButton />
in .src/components/languages-button/index.tsx
.<PageLayout />
in .src/components/page-layout/index.tsx
.She can be found in ./internationalization/i18n.ts
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 it in ressources
like others.
Create un folder with prefix in ./internationalization/locales/
like others.
And customize the constant in your .ts
file.
export const en_US = {
home: {
title: 'Home',
},
};
import { Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
const Example = () => {
const { t } = useTranslation();
return <Text align='center'>{t('home.title')}</Text>;
};
You can find a complete documentation here.
Framer Motion
was directly installed when @chakra-ui/react
is added as dependency.
First, you have to declare your variants :
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
!
import { Container, ContainerProps } from '@chakra-ui/react';
import { motion } from 'framer-motion';
const MotionContainer = motion<ContainerProps>(Container);
And use it as a component :
<MotionContainer
display='flex'
maxW='container.lg'
minH={{ base: 'auto', md: '100vh' }}
px={{ base: 4, lg: 8 }}
initial='hidden'
animate='enter'
exit='exit'
variants={variants}
centerContent
>
{children}
</MotionContainer>
You can find my article with an another example here.
The Search Engine Optimization (SEO)
is important on any websites.
For this template, I used next-seo
and next-sitemap
.
For that you've a PageLayout
component with SEO.
The default config for SEO is that:
<NextSeo
title={title + ' | ' + process.env.siteName}
description={description}
twitter={{
cardType: 'summary_large_image',
handle: '@hakkaofdev',
}}
openGraph={{
url: 'https://www.hakkaofdev.fr',
title: title + ' | ' + process.env.siteName,
description: description,
locale: 'en_US',
images: [
{
url: 'https://www.hakkaofdev.fr/assets/images/social.png',
width: 1200,
height: 630,
alt: 'Alexandre Gossard',
type: 'image/png',
},
],
}}
additionalLinkTags={[
{
rel: 'icon',
href: 'https://www.hakkaofdev.fr/favicon.ico',
},
]}
/>
Just use it like this:
import PageLayout from '@/components/page-layout';
return (
<PageLayout title='This is a template' description='Created by @HakkaOfDev'>
{children}
</PageLayout>
);
Default site-map.
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.