Skip to main content

How I set up my new Next.js projects with a handy bash script

If you’ve watched my live streams on Twitch, you’ll have seen me speed-build and YOLO-deploy quite a few websites with Next.js.

After I bootstrap a new Next.js application with npx create-next-app, there are several things I do to prepare the app for development, including:

  • delete the vercel.svg file

  • delete the Home.module.css file

  • add my own CSS reset rules to globals.css

  • add a custom pages/_document.js file to add a lang attribute to the HTML tag to improve accessibility

  • delete lots of code from pages/index.js

  • open the new project in VSCode

I’m a big fan of automation, and so I wrote a bash script to take care of these tasks for me — and to remind me to have a nice day 😎.

If you’d like to do the same, run the script below with —lang, —appname and —dir flags — and have a nice day! You can also bookmark the gist on GitHub.

# Input flags


# The directory path must be relative to where the script lives

# Loop through arguments and process them
for arg in "$@"
case $arg in
echo "⚡️ Example script usage ⚡️"
echo "./ --lang=en --appname=\"my cool app\" --dir=this-test"

change_dir () {
echo "✨ Changing directory to $1"
cd $1

delete_vercel_svg () {
echo "❌ Deleting vercel.svg"
rm public/vercel.svg

delete_home_css () {
echo "❌ Deleting Home.module.css"
rm styles/Home.module.css

add_custom_document () {
echo "✅ Adding custom _document.js with lang=$LANG"
cd pages
echo 'import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html lang="'
<Head />
<Main />
<NextScript />
export default MyDocument;'
>> _document.js
cd ..

replace_index () {
echo "✅ Replacing pages/index.js"
cd pages
rm index.js
echo 'import Head from "next/head";
export default function Home() {
return (
<meta name="description" content="Description for '
$APP_NAME'" />
<link rel="icon" href="/favicon.ico" />
<h1>This new Next.js app has been reset!</h1>
>> index.js
cd ..

replace_globals_css () {
echo "✅ Replacing styles/globals.css"
cd styles
rm globals.css
echo 'html {
font-size: 100%;
body {
font-size: 1rem;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
* {
box-sizing: border-box;
>> globals.css
cd ..

echo "🔥 Resetting Next.js app in $DIR"
echo "✨ Language: $LANG"
echo "✨ App name: $APP_NAME"

change_dir $DIR

echo "✨ Opening project in VSCode"
code .

echo "📣 DONE. Have a nice day!"

Read next 👇

  • An icon of angled brackets with a forward slash in the middle.
  • A white triangle representing the Vercel logo.
A code example of a Next.js jsconfig.json file, showing how to define absolute paths in your files.

How to avoid using relative path imports in Next.js

11 Jul 2021 1 min read

  • The pink Jamstack logo that features a blocked white J shape on a pink background.
  • An icon of a blank piece of paper with the bottom right corner turned up.
  • An icon of a laptop with angled brackets on the screen.
  • A yellow square with the black letters JS at the bottom right.
  • A white triangle representing the Vercel logo.
A collage of GraphQL conf, Nextjs Conf and Fast Forward Conf social sharing event tickets in a range of desktop and mobile views.

How to build a personalized image social sharing app with Cloudinary and Next.js

7 Sep 2021 11 min read