Skip to main content
whitep4nth3r logo

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

Subscribe

Salma is looking straight at you, sat at her desk. Behind her is a wooden wall with VHS style art on it depicting HTML and CSS in VHS cover art form, there's a bit of a shelf behind her on the right where you can see a plant and a GitHub stars trophy. In the foreground there is a microphone. She is folding her arms, wearing a black high next top and thick rimmed black glasses, sitting on a cream chair that you can see the back of. To the left behind her there is a glimpse of a pink patterned chair and another plant.

Salma Alam-Naylor

I'm a software engineer and developer educator, and I make stuff on the internet. I help developers build cool stuff by writing blog posts, making videos, coding live on the internet, and publishing open source projects. Head of Developer Education at nordcraft.com.

Did this post help you?

☕️ Buy me a coffee

(thank you!)

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 →