편리한 bash 스크립트로 새 Next.js 프로젝트를 설정하는 방법
npx create-next-app 를 사용하여 새 Next.js 애플리케이션을 부트스트랩한 후 다음을 포함하여 개발을 위해 앱을 준비하기 위해 몇 가지 작업을 수행합니다.저는 자동화의 열렬한 팬입니다. 그래서 이러한 작업을 대신 처리하고 좋은 하루를 보내도록 상기시키기 위해 bash 스크립트를 작성했습니다.
동일한 작업을 수행하려면 -lang, -appname 및 -dir 플래그를 사용하여 아래 스크립트를 실행하고 좋은 하루 보내세요! 당신은 또한 할 수 있습니다 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!"
Reference
이 문제에 관하여(편리한 bash 스크립트로 새 Next.js 프로젝트를 설정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/whitep4nth3r/how-i-set-up-my-new-next-js-projects-with-a-handy-bash-script-58o0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
