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

Salma Alam-Naylor How I set up my new Next.js projects with a handy bash script

Like weird newsletters?

Join 347+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

After I create a new Next.js application I run this bash script to prepare my app for development — just the way I like it. Give it a try!

⚠️ This post is over two years old and may contain some outdated technical information. Please proceed with caution!

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

LANG=""
APP_NAME=""

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

# Loop through arguments and process them
for arg in "$@"
do
    case $arg in
        -h|--help)
        echo "⚡️ Example script usage ⚡️"
        echo "./reset-next.sh --lang=en --appname=\"my cool app\" --dir=this-test"
        shift
        exit;
        ;;
        -l=*|--lang=*)
        LANG="${arg#*=}"
        shift
        ;;
        -a=*|--appname=*)
        APP_NAME="${arg#*=}"
        shift
        ;;
        -d=*|--dir=*)
        DIR="${arg#*=}"
        shift
        ;;
    esac
done

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="'$LANG'">
          <Head />
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  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 (
      <>
        <Head>
          <title>'$APP_NAME'</title>
          <meta name="description" content="Description for '$APP_NAME'" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <main>
          <h1>This new Next.js app has been reset!</h1>
        </main>
      </>
    );
  }' >> 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
delete_vercel_svg
delete_home_css
add_custom_document
replace_index
replace_globals_css

echo "✨ Opening project in VSCode"
code .

echo "📣 DONE. Have a nice day!"

Like weird newsletters?

Join 347+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Salma is looking at you, with a rather large smile. She's pointing across herself up to her left, with a very tatooed arm. She's wearing a black shirt and black rimmed glasses.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, videos, live coding and open source projects.