Are you looking to kickstart your web development journey with Next.js and TypeScript? Look no further! The nextjs-typescript-chakra-starter is here to make your life easier.
We've included a bunch of powerful tools to boost your productivity:
- Chakra UI: Create stunning and responsive user interfaces effortlessly.
- Tailwind CSS: Streamline your styling with utility-first CSS.
- ESLint: Catch and fix coding issues as you go.
- ESLint Config Google: Stay in line with Google's coding standards.
- Prettier: Automatically format your code to keep it clean and organized.
- Husky: Pre-commit hooks for a seamless development workflow.
With this template, you can jump straight into your side project without worrying about complex setup. It's your passport to hassle-free development.
To get started with this project, you can follow these steps:
- 📦 Clone the repository:
git clone https://github.com/yourusername/nextjs-typescript-chakra-starter.git - 📂 Navigate to the project folder:
cd nextjs-typescript-chakra-starter - ⚙️ Install dependencies:
npm install - 🚀 Run the development server:
npm run dev
Chakra UI is a versatile and customizable library for building user interfaces with ease. One of its standout features is theming, which allows you to tailor the look and feel of your application to suit your brand or style. This section will walk you through how theming works in Chakra UI and provide an example of changing the theme.
Chakra UI makes it easy to define and apply custom themes to your application. To get started, follow these steps:
- Create a Custom Theme: In your project, create a custom theme file. You can use the
extendThemefunction to extend the default Chakra UI theme and add your custom styles and tokens. In your project, it might look something like this:
import { extendTheme } from "@chakra-ui/react";
import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
const customTheme = extendTheme({
// Your custom theme configuration
// ...
});
export default customTheme;- Pass the theme to the provider: After located the ChakraProvider, just provide the custom theme as prop:
function MyApp({ Component, pageProps }: { Component: React.ComponentType; pageProps: Record<string, unknown> }) {
return (
<ChakraProvider theme={customTheme}>
<Component {...pageProps} />
</ChakraProvider>
);
}- Toggle the change You can simply change the theme using the function toggleColorMode from the useColorMode hook
export function ThemeChanger() {
const { colorMode, toggleColorMode } = useColorMode()
return (
<Button rounded="full" onClick={toggleColorMode}>
Change to Theme {colorMode === 'light' ? 'Dark' : 'Light'}
</Button>
)
}You can customize and extend this starter template to build your web application. It includes a set of scripts to help with development, testing, and deployment. Some of the key scripts from the package.json include:
npm run dev: Start the development server.npm run build: Build your application for production.npm run start: Start the production server.npm test: Run tests for your application.npm run deploy: Deploy your application using thedeploy.shscript.npm run start:dev: Start the application in development mode.npm run start:prod: Start the application in production mode.npm run check-types: Check TypeScript types with tsc.npm run check-format: Check code formatting with Prettier.npm run check-lint: Check code linting with ESLint.npm run format: Format the code using Prettier.npm run test-all: Run all checks, linting, types, and build in one command.npm run prepare: Install Husky pre-commit hooks.npm run test: Run Jest tests.npm run coverage: Run Jest tests with coverage.npm run clean: Remove node modules and package-lock.json.
Feel free to contribute to this project by creating issues, proposing new features, or submitting pull requests. Your contributions are highly appreciated.
This project is licensed under the MIT License - see the LICENSE file for details.
If you have any questions or need assistance, you can reach out to fvastu.