コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

新時代へ向けて準備しようと思う

Next ジェネレーションへ……。

ちょっと聞いてくださいよ。僕がつかってるGitHubリポジトリHTMLサイトしか作ってないことに気づいてしまったわけですよ。ちゃちゃっと意味わかんない静的サイト作るにはNetlify便利すぎるんですよねw。
Andou666 (Andou) · GitHub


けども、世の中のウェッブをいじっている人たちって、普通のHTMLサイトに対して石投げてくる人種しかいないじゃないですか(偏見)。なので、なんか他に代用できる技術使って静的サイトうみだせるようにしていきたいなーって思ったんですよ。というわけで、今日は静的サイトジェネレータもといReactフレームワークNext.jsいじることにします。
Next.js - The React Framework
最近React触っていないなって思ったので使ってみることにしました。理由はそれだけです。あと適当につくったコンポーネントパーツが他でも流用利かせられる(はず)のでぼこぼこHTMLサイト作って使いまわす使い方をしていく僕にはちょうどいい感じになるかなって思ったのでこれ採用しました。まあこっちは言い訳です。


■ 導入

npm init
npm install --save next react react-dom

これで準備完了です。早速確認していきましょうとか思ったんですけど、サイトジェネレータじゃないからHelloWorld的なやつ自動で生成されるわけでもないんですね……。そのままサーバ動かすと404エラーでる、モジュールしかないぞ。

# Windowsにはtouchコマンドがないのでこれでファイル作ります。
type nul > .\pages\index.js
# index.js を良い感じに編集する
# 起動 (デフォルトは3000番)
npm run dev -- -p <ポート番号>

これで確認するとこんなんなります。
f:id:andron:20190519212516p:plain
あー、なるほどねー。「Next.js」完全に理解した(←わかってない)。


なんかつくる

ということで公式チュートリアルにあったimport cowsay from 'cowsay-browser';こいつを使って何かサービスをつくること考えていきます。

参考
GitHub - bushmango/cowsay-browser: cowsay is a configurable talking cow

標準機能になかったので必要ならnpm insatll cowsay-browserとかして追加しよう。cowsayの文字からわかるようにLinuxユーザが慣れしたしんだあいつを呼び出すためだけのアレです。これでなんのサービスができるっていうんだ……。


f:id:andron:20190520194027p:plain
ということで、とりあえずバックに画像を配置してみたがその後どうすればいいか全然わからん。助けてくれ僕はこの後何をすればいいんだ……。僕はなんのサービスをつくろうとしているんだ……(哲学)。もういいや(諦め)、とりあえずNetlifyで動かせるかどうかの確認したいだけなのでこのまま公開します。

んでnext.jsでデプロイしたサイトって、outフォルダに出力されるらしいので「Publish directory」をoutにして、んで以下のようにdeploy用コマンドをつくってやります。
f:id:andron:20190520231333p:plain
package.json

"scripts": {
    "deploy": "npm run build && npm run export"
  }


そうするとこんなの公開できるようになるらしいですよ。
practical-kepler-626b39.netlify.com


GitHUbはこちら
GitHub - Andou666/Ushisan


関連:Netlifyについて
inujini.hatenablog.com