Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hendraaagil/next-chakra-starter

An opinionated simple starter / template project with Next.js and Chakra UI. Created by hendraaagil.
https://github.com/hendraaagil/next-chakra-starter

chakra-ui nextjs starter-template

Last synced: 12 days ago
JSON representation

An opinionated simple starter / template project with Next.js and Chakra UI. Created by hendraaagil.

Host: GitHub
URL: https://github.com/hendraaagil/next-chakra-starter
Owner: hendraaagil
License: mit
Created: 2021-06-02T07:01:54.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2023-10-25T00:00:03.000Z (about 1 year ago)
Last Synced: 2024-10-11T01:50:49.065Z (28 days ago)
Topics: chakra-ui, nextjs, starter-template
Language: JavaScript
Homepage: https://nextjs-chakra-hendraaagil.vercel.app
Size: 282 KB
Stars: 30
Watchers: 1
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

# Next.js Chakra UI Starter Template

![Open Graph](https://og-image.vercel.app/**Next.js%20Chakra**%20Starter.png?theme=light&md=1&fontSize=125px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fraw.githubusercontent.com%2Fchakra-ui%2Fchakra-ui%2Fbf775929a6d73a3aa69e44d5d38542449871475c%2Flogo%2Flogomark-colored.svg)

## Getting Started

1. Clone this template using [degit](https://github.com/Rich-Harris/degit), change "next-chakra-project" with your own project name

```bash
npx degit hendraaagil/next-chakra-starter "next-chakra-project"
```

2. Install all dependencies

Recommended using yarn

```bash
cd next-chakra-project
yarn
```

or using npm

```bash
cd next-chakra-project
npm install
```

3. For customizing options please see [Features](#features) section.

4. Or you can click "Use this template" button above.

## Features

There is some pre-installed packages in this template:

- [next-seo](https://github.com/garmeeh/next-seo)
- [nprogress](https://github.com/rstacruz/nprogress)
- [react-icons](https://github.com/react-icons/react-icons)

Some features in this template:

1. Custom breakpoints & font

You can edit breakpoints & font in `styles/theme.js`.

Import your preferred font in `pages/_document.js` to apply [automatic webfont optimization](https://nextjs.org/blog/next-10-2#automatic-webfont-optimization).
2. Global style

You can edit global style in `styles/styles.js`.
3. Page transition

If you want to custom the page transition go to `pages/_app.js` in `MotionBox` component.
4. Next SEO config file

You can custom `meta`, favicon, open graph, etc. in `next-seo.config.js`.
5. You also can customize nprogress in `styles/css/nprogress.css`.
6. Using absolute path based on `jsconfig.json` file.

## Documentation

For more guides, please read:

- [Next.js Documentation](https://nextjs.org/docs)
- [Chakra UI Documentation](https://chakra-ui.com/)

## License

This project is under [MIT License](LICENSE)

## Credits

Created by [Hendra Agil](https://github.com/hendraaagil)