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