Working with Git and Version Control

Introduction

Git and version control systems are essential tools for managing code changes, collaborating with teams, and ensuring project history is well-maintained. This document provides an overview of best practices and tools for effectively using Git and version control in your Next.js, TailwindCSS, and TypeScript project.

Branching Strategy

Why Use Branches?

Branches allow you to isolate your work, develop features independently, and prevent conflicts in the main codebase.

Common Branching Models

  1. Feature Branching:

    • Create a branch for each feature.
    • Merge it into main or develop after completing the feature.

    Example:

    git checkout -b feature/new-feature
git add .
git commit -m "Implement new feature"
git push origin feature/new-feature

  2. Git Flow:

    • Use branches like develop, feature/*, release/*, and hotfix/* for structured workflows.
    • Requires git-flow CLI or manual branch management.

  3. Trunk-Based Development:

    • Commit directly to the main branch in small, incremental changes.
    • Suitable for smaller teams or CI/CD workflows.

Collaboration and Pull Requests

  1. Push Your Branch to a Remote Repository:

    git push origin feature/branch-name

  2. Create a Pull Request:

    • Open a pull request on platforms like GitHub, GitLab, or Bitbucket.
    • Include a description of the changes, screenshots (if applicable), and any testing instructions.

  3. Code Reviews:

    • Ensure that pull requests are reviewed by at least one other team member.
    • Use tools like GitHub's "Reviewers" feature to assign reviewers.

Resolving Merge Conflicts

Identify Conflicts

Merge conflicts occur when two branches modify the same lines of code. Git will display conflicts during a merge.

Steps to Resolve Conflicts

  1. Open the conflicting file(s) in your code editor.
  2. Locate conflict markers (<<<<<<, ======, >>>>>>) and decide which changes to keep.
  3. Remove the conflict markers and update the code.
  4. Stage the resolved file(s): 
    git add resolved-file.js
  5. Complete the merge: 
    git commit

Commit Best Practices

  1. Write clear and concise commit messages.
  2. Use the imperative mood (e.g., "Add feature", "Fix bug").
  3. Group related changes into a single commit.

Example Commit Message Structure:

feat: Add user authentication feature

- Implement login functionality
- Add token-based authentication
- Update API documentation

Advanced Git Features

Stashing

Temporarily save changes without committing them:

git stash

Reapply stashed changes:

git stash apply

Rebasing

Reapply commits from one branch onto another to maintain a cleaner history:

git checkout feature/branch-name
git rebase main

Squashing Commits

Combine multiple commits into one before merging:

git rebase -i HEAD~n

Replace pick with squash for commits to combine.

Using Git Hooks

Git hooks are custom scripts that run automatically during Git actions.

Example: Pre-Commit Hook

  1. Create a pre-commit hook:

    touch .git/hooks/pre-commit

  2. Add the following script to check for linting errors:

#!/bin/sh
npm run lint
if [ $? -ne 0 ]; then
  echo "Linting errors found. Commit aborted."
  exit 1
fi
  1. Make the hook executable: 
    chmod +x .git/hooks/pre-commit

Version Control Tools

  1. Git GUIs:

    • Tools like GitHub Desktop, Sourcetree, and GitKraken simplify Git workflows with a graphical interface.

  2. GitHub CLI:

    • Use GitHub CLI for faster repository management: 
      gh pr create --title "Add new feature" --body "This PR implements the new feature"

  3. CI/CD Integration:

    • Connect your Git repository to CI/CD platforms like GitHub Actions or GitLab CI for automated testing and deployment.

Undoing Changes

Undo the Last Commit (Keep Changes)

git reset --soft HEAD~1

Discard All Local Changes

git reset --hard

Revert a Commit

git revert <commit-hash>

Conclusion

By following these Git best practices and leveraging advanced features, you can maintain a clean and efficient version control workflow. Proper collaboration, commit hygiene, and conflict resolution ensure a smooth development experience for your Next.js project. Happy coding!