はじめに
初投稿です。
Next.js / TypeScript / Firebaseを使ってポートフォリオサイトを作ってみました。
作ったあとでNextのルーティング機能とかいらなかったなと思ったのは秘密...
デプロイしたのでとりあえず公開。
作り方を初学者の方向けにまとめてみました！ご意見いただけると嬉しいです！
随時更新します！
お前誰？
こういう者です...（成果物）
最近は自作キーボードを作ったり、スタートアップ企業で2社ほどお手伝いさせていただいています！
誰向けの記事？
React, Next.jsのチュートリアルくらいはやったことある！という初学者の方向けです。
目次
- Hello World
- _app.tsx / _document.tsx
- Material-UI
- 画像
- デプロイ
参考資料
1. Hello World
Next.jsをインストール
$npm init -y$npminstall--save react react-dom next
$npminstall--save-dev typescript @types/react @types/node
$mkdir pages
$touch pages/index.tsx
git始めます
※gitでコード管理していない人はとばしてください！
$git init
# 忘れずに.gitignoreを書き変えましょう$vi .gitignore
.DS_store
# next.js build output
.next
.next/
# Logs
npm-debug.log*
.vscode/
# node.js
node_modules/
npm-debug.log
# dotenv environment variables file (build for Zeit Now)
.env
.env.build
追記し終わったら...
$git add .$git commit
$git remote add origin https://github.com/hoge/fuga.git
$git push origin master
では、HelloWorldしましょう。
import{NextPage}from'next';constHome:NextPage=()=>(<h1>Hello world!</h1>);exportdefaultHome;デバッグサーバを立てます。
$npm run dev
localhost:3000にアクセスしてみましょう。
出来たてホヤホヤのHelloWorldがいるはずです！
2. _app.tsx / _document.tsx
Next.jsで開発するなら、この2つのファイルをpages/ディレクトリに置いてください。
まずはこちらの記事を参考に書いてみましょう！
これらのファイルの詳しい説明は下記のブログが分かりやすかったので引用させていただきました。
_document.tsxを書くと吐き出されるHTMLファイルの構成を変えることができ、_app.tsxを書くとすべてのRouteコンポーネントがここで書いたコンポーネントによってラップされるようになります。
TypeScriptでNext.js 9を触った感想ーkohei.dev
3. Material-UI
Google Material Design のガイドラインに沿ったデザインフレームワーク。
多機能かつ洗練されていて素晴らしいと思います。
たまに痒いところに手が届かないですが...
早速インストール！
$npminstall @material-ui/core @material-ui/icons @material-ui/styles @material-ui/lab
Hello Worldしていきましょう！
import{NextPage}from'next';import{Button}from'@material-ui/core';constHome:NextPage=()=>(<Buttonvariant="contained"color="primary">
Hello World
</Button>);exportdefaultHome;Hello Worldボタンができました。
tsconfig.json
さて、こちらのページを見ながらMaterial-UI用のtsconfig書いていきましょう
{"compilerOptions":{"target":"es6","lib":[+"es6"+"dom","dom.iterable","esnext"],"allowJs":true,"skipLibCheck":true,"strict":true,"forceConsistentCasingInFileNames":true,"noEmit":true,"esModuleInterop":true,"module":"esnext","moduleResolution":"node","resolveJsonModule":true,"isolatedModules":true,"jsx":"preserve",+"noImplicitAny":true,+"noImplicitThis":true,+"strictNullChecks":true},"exclude":["node_modules"],"include":["next-env.d.ts","**/*.ts","**/*.tsx"]}font-awesome
Material-UIのアイコンだけで物足りない！という人はfont-awesomeを使ってみてください。
もちろんMaterial-UIのIconコンポーネントが対応しています。
スッスッ
※上下スクロールのシングルページにしたのでやめましたreact-swipeable-viewsでページがスッスッと動くUIを作れます。詳しくはMaterial-UIのTagsコンポーネントをみてね
$npm i --save react-swipeable-views @types/react-swipeable-views
4. 画像
前提
next.jsではpublicという名前のディレクトリに静的ファイルを置く必要があります。
公式リンク
publicを作成して、その配下に画像をおきましょう。
$mkdir public
$mv ~/hoge.png public/
プラグイン
next-imagesというプラグインがあります
画像の表示にはこちらを使ってみました。
$npminstall--save next-images @types/next-images
↓インストールできたら、以下で画像表示ができるはず！
constwithImages=require('next-images');module.exports=withImages();デプロイ
タイトル通り、デプロイはFirebaseで行います。
今回はFirebase Hostingに静的ページとしてデプロイしましょう。
まずは、firebase-toolsを導入。
# firebaseと接続するツール$npm i -g firebase-tools
# projectIDを記述$vi .firebaserc
続いてFirebase Consoleにアクセスし、プロジェクトを作成。
プロジェクトのIDを取得してください！
取得できたら書き加える...
{"projects":{"default":"xxxxxxxxx"}}$firebase login
# このコマンドでプロジェクトが表示されたら成功！$firebase projects:list
package.jsonのscriptsにexportコマンドを追加。
{"scripts":{"test":"echo \"Error: no test specified\"&& exit 1","dev":"next","deploy":"firebase deploy","build":"next build","start":"next start",//exportを追加"export":"next export"},}Firebase Hostingの設定を書きます。
{"hosting":{"public":"out","ignore":["firebase.json","**/.*","**/node_modules/**"]}}next.jsの静的ファイル置き場のディレクトリ名はpublicでした。
Firebase Hostingでデフォルトの公開ファイル置き場もpublicなので書き換えます。
https://nextjs.org/learn/excel/static-html-export
ビルドしたファイルをまとめて静的ページにしてデプロイするためのフォルダを作りましょう。
$mkdir out
できたら準備完了。いよいよデプロイ。
$npm run build && npm run export$firebase deploy
表示されたHosting URLにアクセスしてみましょう！
参考資料
UI
環境
実装 / アーキテクチャ
Next.js on Cloud Functions for Firebase with Firebase Hosting
Next.jsとFirebaseで更新の手間がかからないポートフォリオサイトを作ってみた
Typescript + React、Firebase Hosting & Functions、Github GraphQL APIを使って自分のポートフォリオサイトを作った。
firebase上でtypescriptで書かれたnextjsを動かす
ちょっと真面目なNext.js【Firebase Hosting編】