Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@sesame_apps(sesame apps)

Next.js × TypeScript × Firebaseでポートフォリオ

Last updated at Posted at 2020-08-16

はじめに

初投稿です。
Next.js / TypeScript / Firebaseを使ってポートフォリオサイトを作ってみました。
作ったあとでNextのルーティング機能とかいらなかったなと思ったのは秘密...

デプロイしたのでとりあえず公開。
作り方を初学者の方向けにまとめてみました！ご意見いただけると嬉しいです！

随時更新します！

お前誰？

こういう者です...（成果物）
最近は自作キーボードを作ったり、スタートアップ企業で2社ほどお手伝いさせていただいています！(ただの手伝いですが……)

誰向けの記事？

React, Next.jsのチュートリアルくらいはやったことある！という初学者の方向けです。

目次

  1. Hello World
  2. _app.tsx / _document.tsx
  3. Material-UI
  4. 画像
  5. デプロイ

参考資料

1. Hello World

Next.jsをインストール

~/workspace/portfolio
$npm init -y
$npm install --save react react-dom next
$npm install --save-dev typescript @types/react @types/node
$mkdir pages
$touch pages/index.tsx

補足：@types/~は型定義ファイル

git始めます

※gitでコード管理していない人はとばしてください！

~/workspace/portfolio
$git init
# 忘れずに.gitignoreを書き変えましょう
$vi .gitignore
.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

追記し終わったら...

~/workspace/portfolio
$git add .
$git commit
$git remote add origin https://github.com/hoge/fuga.git
$git push origin master

では、HelloWorldしましょう。

pages/index.tsx
import { NextPage } from 'next';

const Home: NextPage = () => (
<h1>Hello world!</h1>
);

export default Home;

デバッグサーバを立てます。

~/workspace/portfolio
$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 のガイドラインに沿ったデザインフレームワーク。
多機能かつ洗練されていて素晴らしいと思います。
たまに痒いところに手が届かないですが...

早速インストール！

~/workspace/portfolio
$npm install @material-ui/core @material-ui/icons @material-ui/styles @material-ui/lab

Hello Worldしていきましょう！

pages/index.tsx
import { NextPage } from 'next';
import { Button } from '@material-ui/core';

const Home: NextPage = () => (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
);

export default Home;

Hello Worldボタンができました。

tsconfig.json

さて、こちらのページを見ながらMaterial-UI用のtsconfig書いていきましょう

tsconfig.json
{
  "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コンポーネントが対応しています。

font-awesome

スッスッ

※上下スクロールのシングルページにしたのでやめました
react-swipeable-viewsでページがスッスッと動くUIを作れます。
詳しくはMaterial-UIのTagsコンポーネントをみてね

~/workspace/portfolio
$npm i --save react-swipeable-views @types/react-swipeable-views

4. 画像

前提

next.jsではpublicという名前のディレクトリに静的ファイルを置く必要があります。
公式リンク

publicを作成して、その配下に画像をおきましょう。

~/workspace/portfolio
$mkdir public
$mv ~/hoge.png public/
プラグイン

next-imagesというプラグインがあります
画像の表示にはこちらを使ってみました。

~/workspace/portfolio
$npm install --save next-images @types/next-images

↓インストールできたら、以下で画像表示ができるはず！

next.config.js
const withImages = require('next-images');
module.exports = withImages();

デプロイ

タイトル通り、デプロイはFirebaseで行います。
今回はFirebase Hostingに静的ページとしてデプロイしましょう。

まずは、firebase-toolsを導入。

~/workspace/portfolio
# firebaseと接続するツール
$npm i -g firebase-tools

# projectIDを記述
$vi .firebaserc

続いてFirebase Consoleにアクセスし、プロジェクトを作成。
プロジェクトのIDを取得してください！
取得できたら書き加える...

.firebaserc
{
  "projects": {
    "default": "xxxxxxxxx"
  }
}
~/workspace/portfolio
$firebase login
# このコマンドでプロジェクトが表示されたら成功！
$firebase projects:list

package.jsonのscriptsにexportコマンドを追加。

package.json
{
  "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の設定を書きます。

firebase.json
{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
補足
next.jsの静的ファイル置き場のディレクトリ名はpublicでした。
Firebase Hostingでデフォルトの公開ファイル置き場もpublicなので書き換えます。

https://nextjs.org/learn/excel/static-html-export

ビルドしたファイルをまとめて静的ページにしてデプロイするためのフォルダを作りましょう。

~/workspace/portfolio
$mkdir out

できたら準備完了。いよいよデプロイ。

~/workspace/portfolio
$npm run build && npm run export

$firebase deploy

表示されたHosting URLにアクセスしてみましょう！

参考資料

UI

Reactでポートフォリオを作ってみた
爆速デザイン

環境

環境構築
コミッターのquiita

実装 / アーキテクチャ

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編】

4
7
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?