Typescript Next.js Chakra-UI Framer-Motion Starter Kit

Start with a powerful template ⚡️

Github Stars Code quality Code grade Top languages

Getting started
Paths & Files
Useful dependencies (Important)
Components
Internationalization
Theme
Framer Motion
SEO

See a DEMO here.

Getting started

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

Paths & Files

This is the main structure of the template.

Structure

.
├── 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.
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.

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

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.

export const en_US = {
  home: {
    title: 'Home',
  },
};

How to use it

import { Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';

const Example = () => {
  const { t } = useTranslation();

  return ;
};

Theme

You can find a complete documentation here.

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 :

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(Container);

And use it as a component :

You can find my article with an another example here.

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:

Just use it like this:

import PageLayout from '@/components/page-layout';

return (
  
     
);

Sitemap

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.

View Github

Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript