Skip to main content
whitep4nth3r logo

Updated 5 Sep 2021

1 min read

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

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 251+ subscribers in the Weird Wide Web Hole to find no answers to questions you didn't know you had.

Subscribe

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.

Related posts

11 Jul 2021

How to avoid using relative path imports in Next.js

Say goodbye to ../really/long/and/silly/paths/to/components in your Next.js application and define absolute imports with a jsconfig.json file.

Snippets 1 min read →

7 Sep 2021

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

Encourage your event attendees to share their tickets for your next virtual event!

Tutorials 11 min read →