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 with npx create-next-app, I run this bash script to prepare my app for development — just the way I like it. And then I tell myself to have a nice day! 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


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

# Loop through arguments and process them
for arg in "$@"
case $arg in
echo "⚡️ Example script usage ⚡️"
echo "./ --lang=en --appname=\"my cool app\" --dir=this-test"

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="'
<Head />
<Main />
<NextScript />
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 (
<meta name="description" content="Description for '
$APP_NAME'" />
<link rel="icon" href="/favicon.ico" />
<h1>This new Next.js app has been reset!</h1>
>> 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

echo "✨ Opening project in VSCode"
code .

echo "📣 DONE. Have a nice day!"

Want weird stuff in your inbox?

Subscribe to the Weird Wide Web Hole newsletter and find no answers to questions you didn't know you had.


Powered by Buttondown.

Salma in her office, backlit with pink, smiling and looking into the camera.

Salma Alam-Naylor

I'm a live streamer, software engineer, and developer educator. I help developers build cool stuff with blog posts, tutorial 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

In this post, we’re going to build an app that generates a personalized image of a ticket to share on socials using Cloudinary and Next.js so you can encourage your event attendees to share their tickets for your next virtual event!

Tutorials 11 min read →