Ts-next-chakra-motion-kit - Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript

Overview

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

Start with a powerful template ⚡️


Github Stars Code quality Code grade Top languages Opensource License


Table of contents

  • 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.3.2 for useful hooks.
  • react-intersection-observer in v8.33.1 for advanced animations. You can find an example of use here.
  • prettier in v2.5.1 for formatting code.
  • eslint in v8.7.0 for errors.
  • react-country-flag in v3.0.2 for flags. Example here.
  • @react-icons/all-files in v4.1.0 for icons. React-Icons
  • Fonts to fontsource.org.

Components

  • <ThemeButton /> in .src/components/theme-button/index.tsx.
  • <LanguagesButton /> in .src/components/languages-button/index.tsx.
  • <PageLayout /> 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);

i18n.use(initReactI18next).init({
  fallbackLng: 'us',
  lng: 'us',
  resources,
});

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 <Text align='center'>{t('home.title')}</Text>;
};

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

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:

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

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 hesistate to contact me if you want advices or if you have any questions or post an issues.

You might also like...
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit

Now UI Kit React is a free Bootstrap 4, React, React Hooks and Reactstrap UI Kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.

Tail-Kit A beautiful and large components and templates kit for TailwindCSS 2.0 Tail-Kit is Free and Open Source. It does not change or add any CSS to

Starter project for firebase web with React, Chakra UI and auth pages added
Starter project for firebase web with React, Chakra UI and auth pages added

Firebase React Chakra UI Starter A starter project for Firebase web. Installation Clone the repository git clone [email protected]:stephenbaidu/firebase-

Chakra UI component library starter template

Chakra Library ✨ 🚀 Chakra UI component library starter template. Fast builds with Vite ⚡ Pre-configured Storybook 📚 Create release at GitHub or GitL

Um dashboard feito em TypeScript, React, Next, react-apexcharts, yup e Chakra-Ui.
Um dashboard feito em TypeScript, React, Next, react-apexcharts, yup e Chakra-Ui.

💻 Sobre o projeto Um dashboard feito em TypeScript, React, Next, react-apexcharts, yup e Chakra-Ui. 🧪 Tecnologias usadas Esse projeto foi desenvolvi

StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.
StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.

StarHackIt StarHackIt is a fullstack starter kit composed of: React web frontend Node backend React native mobile app Infrastructure as code with GruC

:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It com

Highly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. :fire:
Highly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. :fire:

React Enterprise Starter Kit 🔥 Highly Scalable, performant and amazing react boilerplate for react developers to get started and improve web building

This project is a React Starter Kit with basic tools and examples of their use.

Welcome React Starter Kit! This project is a React Starter Kit with basic tools and examples of their use. Tools used React: V17 react-hook-form: V7 r

Releases(v0.1)
Owner
Alexandre Gossard
Developer, designer. I create more and more crazy projects and share them with you.
Alexandre Gossard
Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Portfolio site developed with NextJs & React framer-motion for fluid fancy animations

Pranav Yeole 11 Jul 6, 2022
React Package Starter - a simple and slightly opinionated starter kit for developing and publishing React packages

React Package Starter This is a simple and slightly opinionated starter kit for developing and publishing React packages. It comes with a several pre-

Tim Mikeladze 9 Sep 22, 2022
dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

ETH Salt Lake 7 Aug 24, 2022
Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

Web3 Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3modal

ETH Salt Lake 7 Aug 24, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

Muhammad Ridho Anshory 13 Sep 23, 2022
Nextjs-starter - A TypeScript starter for Next.js

Next.js TypeScript Starter Features ⚡️ Next.js 12 ⚛️ React 17 ⛑ TypeScript ?? ES

Felix Lee 4 Sep 14, 2022
Starter Next.js template with chakra UI

Starter Next.js template with chakra UI Got tired of always starting projects from scratch. hopefully this helps.

Boluwatife Oluwaseyi Abiola 9 Aug 30, 2022
Vision-ui-dashboard-chakra - An Innovative Admin Template for Chakra UI and React

Vision UI Free Chakra Most trendiest, complex and innovative Free Chakra UI Dash

Creative Tim 112 Sep 21, 2022
Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Sandy Marko Knauer 1 Sep 6, 2022
GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

GraphQL first full-stack starter kit with Node, React. Powered by TypeScript

Karan Pratap Singh 1.1k Sep 29, 2022