Automating Next.js Project configuration with a Custom Shell Script

Introduction

Setting up a new Next.js project can sometimes take time, especially if you want consistency across multiple projects. To streamline this process, I’ve developed a shell script that automates the creation of a new Next.js project configures Tailwind CSS, and optionally installs additional libraries such as react-query, zod, and vitest. I’ll walk you through the script and show you how it works.

Github repo: https://github.com/MaeWolff/create-nextjs-app-bash-script

How It Works

Step 1: Choosing the Package Manager

The script asks which package manager you want to use: npm, yarn, pnpm, or bun. You can select an option by typing the corresponding letter.

choose_package_manager() {
 echo "Which package manager do you want to use?"
 echo "a) npm"
 echo "b) yarn"
 echo "c) pnpm"
 echo "d) bun"
 read -p "Select an option (a-d): " package_manager_option
 
    case $package_manager_option in
    a)
        package_manager="npm"
        ;;
    b)
        package_manager="yarn"
        ;;
    c)
        package_manager="pnpm"
        ;;
    d)
        package_manager="bun"
        ;;
    *)
        echo -e "${RED}Invalid option. Using npm by default.${NOCOLOR}"
        package_manager="npm"
        ;;
    esac
}

Who knew package managers could be so opinionated?

Step 2: Naming the Project

Next, the script prompts you to enter the name of your project. This name is then used to create the project using the npx create-next-app command.

read -p "What is your project named? " project_name
npx create-next-app@latest "--use-$package_manager" "$project_name"
cd $project_name

Step 3: Configuring Styles

The script then removes the default globals.css file and sets up a new tailwind.css file in a styles directory.

echo -e "${GREY}Fixing styles files...${NOCOLOR}"
remove_file "src/app/globals.css"
mkdir -p src/styles

echo '@tailwind base;
@tailwind components;
@tailwind utilities;' >src/styles/tailwind.css

It also updates the layout.tsx file to import the new tailwind.css file instead of globals.css.

sed -i '' -e 's|import \("./globals.css"\);|import \"../styles/tailwind.css"\;|' src/app/layout.tsx

Step 4: Adding Prettier Plugins

To ensure your code is well-formatted, the script installs Prettier and a Tailwind CSS plugin.
- https://github.com/tailwindlabs/prettier-plugin-tailwindcss

echo -e "${GREY}Adding prettier plugins...${NOCOLOR}"
$package_manager install -D prettier prettier-plugin-tailwindcss

echo '{
  "plugins": ["prettier-plugin-tailwindcss"]
}' >.prettierrc

Step 5: Managing Dependencies

Finally, the script asks if you want to install additional dependencies like React Query, Zod, and Vitest. Depending on your responses, it installs these packages using the selected package manager.

echo -e "${GREY}Managing dependencies installation...${NOCOLOR}"
read -p "Do you want to install react-query and zod? (y/n): " install_react_query
if [ "$install_react_query" == "y" ]; then
    $package_manager install @tanstack/react-query zod @types/react-query
fi

read -p "Do you want to install vitest? (y/n): " install_vitest
if [ "$install_vitest" == "y" ]; then
    $package_manager install vitest -D
fi

Conclusion

This shell script is a great way to automate the repetitive tasks of setting up a new Next.js project. By using this script, you can ensure consistency across your projects and save valuable time. Feel free to customize the script to fit your needs and share it with your team to improve your workflow.

Happy coding!

(This is one of my first articles, so don’t hesitate if you have any feedback.)

Github repo: https://github.com/MaeWolff/create-nextjs-app-bash-script