Salma Alam-Naylor

Posted on Jul 9, 2021 • Updated on Oct 21, 2022 • Originally published at whitep4nth3r.com

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

#webdev #bash #nextjs

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!"