✨Next.js入門✨ 思考停止・爆速開発テンプレ【TypeScript+ESLint+Prettier】
はじめに
こんにちは。今回はNext.jsの新しいプロジェクト作成を脳死でやるためのテンプレートを用意しました。主に自分用ではありますが、毎回調べるのは煩わしいので書き留めておきます。おまけでチュートリアルも付けておきました!😁
環境
- (VSCode)
- Node.jsがインストール済み
1. Next.jsのプロジェクトを作成
Npxを使って新しいプロジェクトを作ります。$PROJECT_NAMEは適宜置き換えてください。
$ npx create-next-app $PROJECT_NAME
2. /pagesを/srcに格納
プロジェクトが肥大化すると見にくくなるため、/srcにコードをまとめます。
$ cd {$PROJECT_NAME}
$ mkdir src && mv pages src
3. Next.jsにTypeScriptを導入
Next.jsでTypeScriptが使えるようにします。プロダクションでは使用しないので、「devDependencies」としてインストールする -D オプションを使いましょう。
$ npm install -D typescript @types/react @types/react-dom @types/node
4. ESLintとPrettierを導入
これらはエラーを事前に取り除いたり、コードを整形するためのものです。開発を効率化するためには必須です。
$ npm install -D eslint prettier eslint-config-prettier
ESLintで使うプラグインもインストールします。
$ npm install -D eslint-plugin-{react,react-hooks,prettier}
$ npm install -D @typescript-eslint/{parser,eslint-plugin}
5. ESLintのルールを設定
好みでカスタマイズできますが、今回は省略して一般的なものを使います。以下のファイルを作成してください。
{
"env": {
"es6": true,
"node": true,
"browser": true,
"commonjs": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"React": "writable"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": ["react-hooks", "react", "@typescript-eslint", "prettier"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"prettier",
"prettier/react",
"prettier/@typescript-eslint"
],
"rules": {
"react/prop-types": "off",
"prettier/prettier": "error",
"react/react-in-jsx-scope": "off"
},
"overrides": [
{
"files": ["*.js"],
"rules": {
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/explicit-function-return-type": "off"
}
}
]
}
6. Prettierを設定
こちらも好みでカスタマイズ可能です。私はセミコロン有りのコードを使っていますが、気持ちの悪い方はオプションをいじってみてください。
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2
}
7. VSCodeで自動整形する
ESLintを手動で実行しようとすると95%忘れるので自動でやってもらいましょう。まず、VSCodeで以下のプラグインを検索して、インストールしてください。
- ESLint
- Prettier
...えっ?俺はVSCode使ってないって...?(それはごめん)
$ mkdir .vscode
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
8. next.config.jsを作成(オプション)
next.config.js: Introductionでその他のオプション一覧を見れます。このファイルでURLをリダイレクトする処理などを作成できます。
module.exports = {
distDir: 'build',
reactStrictMode: true,
poweredByHeader: false,
}
9. package.jsonを編集(オプション)
- "dev" : PCだけでなくスマホ等でも動作をチェックするため変更しています。
- "start" : 私はGAEでNext.jsを動かすため、ポート8080で動くように変更しています。
- "build" : たまにバグってしまうので、一度削除してからビルドします。
- "lint" : ESLintを実行するためのコマンドを用意します。テストの自動化で役に立ちます。
{
...
"scripts": {
"dev": "next dev --hostname 0.0.0.0",
"build": "rm -rf ./build && NODE_ENV=production next build",
"start": "next start -p 8080",
"lint": "eslint src/** --ext .ts,.tsx",
"lint:fix": "eslint src/** --ext .ts,.tsx --fix",
"prettier:quick": "pretty-quick --staged"
},
...
}
10. TypeScriptをかくぞ!(チュートリアル)
srcフォルダに移動しましょう。今の状況では、_app.jsがありますが、_app.tsxにリネームします。そして、下のようにコードを編集します。
import React from 'react';
import '../../styles/globals.css';
interface Props {
pageProps: any;
Component: any;
}
export default class App extends React.Component<Props> {
render(): JSX.Element {
const { pageProps, Component } = this.props;
return (
<>
<Component {...pageProps} />
</>
);
}
}
index.jsも同様にindex.tsxにリネームして、編集します。
import React from 'react';
import Head from 'next/head';
import styles from '../../styles/Home.module.css';
const Home: React.FC = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.ts!</a>
</h1>
<p className={styles.description}>
Get started by editing <code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation →</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn →</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a href="https://github.com/vercel/next.js/tree/master/examples" className={styles.card}>
<h3>Examples →</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy →</h3>
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
);
};
export default Home;
ちなみに、src/pages/apiは使っていないので削除しておきましょう。
$ rm -rf src/pages/api
ここまで来たらラストです!実行してみましょう!
$ npm run dev
そして、ブラウザで localhost:3000 へアクセスしてこのような画面が表示されたら入門成功です!おめでとう!
11. Sassを導入する(おかわり🍜)
$ npm install sass
これだけで使えるようになります。
いつもサポートありがとうございます!