We are the first generation to feel the sting of climate change, and we are the last generation that can do something about it. Save our planet 🪴

Welcome to the Next.js TypeScript Boilerplate! This guide will help you get started with the boilerplate and follow best practices for folder structure, React Query usage, toasts, and more.

• Next.js 14 with TypeScript
• Folder structure for better organization
• React Query for data fetching and mutations
• Tailwind for styling
• React-hot-toast for toast notifications
• SEO-friendly Meta component
• Sitemap generation script
• Pre-configured with Husky, Commit lint, ESLint, Lint-staged

1. Clone the Repository:

   git clone https://github.com/yousufkalim/next-ts-boilerplate.git

2. Install and setup Dependencies:

   cd <project-folder>
   yarn install
   cp .env.example .env

3. Run in dev mode:

   yarn run dev

The boilerplate follows a structured organization to enhance maintainability and scalability.

• api: External API handler functions.
• assets: Assets used in the project.
• components: Reusable React components.
• config: Configuration files, including environment variables.
• context: Context API setup for global state management.
• hooks: Useful custom hooks.
• layouts: Logic to gather components for layout rendering.
• pages: Next.js pages.
• types: TypeScript types and interfaces.
• utils: Utility functions.

The boilerplate integrates React Query for efficient data fetching and mutations. Follow the pattern used in the 'todos' page:

• useQuery: Fetching data from an API.

  import { fectAllTodos } from '@api/todos.api';
  
  // ...
  
  const { data, refetch, error } = useQuery('todos', fectAllTodos);

• useMutation: Modifying data on the server.

  import { updateTodo } from '@api/todos.api';
  
  // ...
  
  const mutation = useMutation(updateTodo);
  await mutation.mutateAsync({ ...todo, completed: true });
  
  // Invalidate todos so it can refetch all todos
  queryClient.invalidateQueries({ queryKey: ['todos'] });
  
  // Or you can simply refetch
  refetch();

For toast notifications, utilize the react-hot-toast library. Import and use it in your components:

import toast from 'react-hot-toast';

// ...

toast.success('Todo marked as completed!');

Use the 'Meta' component for SEO information, including OG details. Place it at the top of your page components:

import Meta from '@components/Meta';

const MyPage: React.FC = () => {
  return (
    <>
      <Meta title="My Page" description="This is my page." />
      {/* Your page content */}
    </>
  );
};

A script is included to generate a sitemap during the build process. Simply run:

yarn run build

The sitemap will be created in the 'public' folder.

The boilerplate comes with pre-configured tools for maintaining code quality:

• Husky: Git hooks to automate checks.
• Commitlint: Linting commit messages for consistency.
• ESLint: JavaScript and TypeScript linting.
• Lint-staged: Run ESLint on staged files.

Congratulations! You're now set up with the Next.js TypeScript Boilerplate. Feel free to customize and extend it according to your project requirements. If you encounter issues or have suggestions, reach out to me.

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request :D

Yousuf Kalim [email protected] https://yousufkalim.com

GitHub @yousufkalim · LinkedIn @yousufkalim

Happy coding!