2

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

 2 years ago
source link: https://dev.to/whitep4nth3r/how-i-set-up-my-new-next-js-projects-with-a-handy-bash-script-58o0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

Jul 9 Originally published at whitep4nth3r.com

・2 min read

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, including randomcodegenerator.lol, unbreak.tech, womenwhostream.tech and whitep4nth3r.com.

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 {
    static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx);
      return { ...initialProps };
    }
    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!"
Enter fullscreen modeExit fullscreen mode

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK