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 <ポート番号>
これで確認するとこんなんなります。
あー、なるほどねー。「Next.js」完全に理解した(←わかってない)。
なんかつくる
ということで公式チュートリアルにあったimport cowsay from 'cowsay-browser';
こいつを使って何かサービスをつくること考えていきます。
参考
GitHub - bushmango/cowsay-browser: cowsay is a configurable talking cow
標準機能になかったので必要ならnpm insatll cowsay-browser
とかして追加しよう。cowsayの文字からわかるようにLinuxユーザが慣れしたしんだあいつを呼び出すためだけのアレです。これでなんのサービスができるっていうんだ……。
ということで、とりあえずバックに画像を配置してみたがその後どうすればいいか全然わからん。助けてくれ僕はこの後何をすればいいんだ……。僕はなんのサービスをつくろうとしているんだ……(哲学)。もういいや(諦め)、とりあえずNetlifyで動かせるかどうかの確認したいだけなのでこのまま公開します。
んでnext.jsでデプロイしたサイトって、outフォルダに出力されるらしいので「Publish directory」をoutにして、んで以下のようにdeploy用コマンドをつくってやります。
package.json
"scripts": { "deploy": "npm run build && npm run export" }
そうするとこんなの公開できるようになるらしいですよ。
practical-kepler-626b39.netlify.com
GitHUbはこちら
GitHub - Andou666/Ushisan
関連:Netlifyについて
inujini.hatenablog.com