社内ハンズオン資料を転記
レジュメ
- Todoist で進捗管理
- React.js で簡単な単一ページの作成してもらい、SPA を理解してもらう
- linter を入れて矯正ギブス オン
- now(SAAS) による外部公開サイトの作成方法を理解してもらう
事前準備
- todoist インストール（他管理ツールあればそちらでも可）
- node インストール
brew install nodebrewbrew install yarn --ignore-dependencies
nodebrew セットアップ
※ インストール済みの人はスキップ
環境変数追記
.bashrc
export NODEBREW_ROOT=$HOME/.nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
zshならこれ
.zshrc
if [ -d "$HOME/.nodebrew" ] ; then
export NODEBREW_ROOT=$HOME/.nodebrew
export NODE_HOME="$NODEBREW_ROOT/current/bin"
path=($NODE_HOME(N-/) $path)
fi
nodeのインストール
% brew install nodebrew
% nodebrew setup
% nodebrew install-binary stable
% nodebrew use stable
% node -v
v12.1.0
% brew install yarn --ignore-dependencies
ハンズオン
todoistでプロジェクト作成
タスク作って管理してください！
思いついた作業があればどんどん追加してね
- nextjs-hands-on
- node セットアップ
- yarn インストール
- リポジトリ作成
- Next.jsのセットアップ
- helloworld作成
- nowへデプロイ
リポジトリ用意
nextjs-hands-on とか好きな名前で作ってください
% git clone https://github.com/xxxxx/nextjs-hands-on
% cd next-js-hands-on
.gitignore
node_modules
yarn-error.log
.next
Next.jsのセットアップ
node.js 用の設定ファイルpackage.json を作ってください。
package.json
{
"name": "nextjs-hands-on",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
作ったらパッケージインストール
% yarn add next react react-dom
立ち上がれば準備OK
% yarn dev
ページ作成
下記ファイルを作ってアクセスできれば、セットアップ完了
http://localhost:3000/
% mkdir -p pages
pages/index.js
import Link from 'next/link'
const Home = () => {
return <div>
<div>Welcome to Next.js!</div>
<Link href='/about'><a>about</a></Link>
</div>
}
export default Home
pages/about.js
import Link from 'next/link'
export default () => {
return <>
<div>about page</div>
<Link href='/'><a>Home</a></Link>
</>
}
linter セットアップ
standard
JavaScript Standard Styleを利用したいと思います
https://standardjs.com/readme-ja.html
% yarn add -D standard
package.json
{
"scripts": {
"lint": "standard",
"lint:fix": "standard --fix",
}
}
page/index.js のタブとか崩してから、yarn lint, yarn lint:fix してみよう
prettier
整形ツールprettierをいれよう
yarn add -D prettier
.prettierrc.json
{
"singleQuote": true,
"semi": false,
"trailingComma": "es5"
}
package.json
{
"scripts": {
"prettier": "prettier --write \"**/*.{js,jsx,json,md,mdx,css,html,yml,yaml,scss,sass}\" && yarn lint-fix",
}
}
nowでデプロイ
デプロイ用CLIをインストール
% npm i -g now
now用の設定ファイル
next.config.js
module.exports = {
target: 'serverless'
}
now.json
{
"version": 2,
"name": "next-js-hands-on",
"builds": [
{
"src": "next.config.js",
"use": "@now/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/$1"
}
]
}
startコマンド修正
package.json
"scripts": {
"build": "next build",
"start": "next"
ログイン＆デプロイ
% now login # メール認証実行後
% now # デプロイ開始
> Deploying ~/src/github.com/XXXXX/nextjs-hands-on under xxxxxxxxxxxxx
> Using project next-js-hands-on
> Synced 2 files (314B) [920ms]
> https://next-js-hands-on-c942xp5e4.now.sh [v2] [1s]
┌ next.config.js Ready [28s]
├── λ _error (85.54KB) [hnd1]
├── λ about (87.54KB) [hnd1]
├── λ index (87.58KB) [hnd1]
├── _next/static/coNPEuflo9lqvZoyFtoIa/pages/_app.js (2.43KB)
├── _next/static/coNPEuflo9lqvZoyFtoIa/pages/_error.js (7.73KB)
└── 5 output items hidden
> Ready! Aliased to https://next-js-hands-on.xxxxxxxx.now.sh [in clipboard] [33s]
参考資料
- Documentation - Getting Started | Next.js - https://nextjs.org/docs
- JavaScript Standard Styleのススメ - Qiita - https://qiita.com/munieru_jp/items/ca16cbfa859468137d2e#packagejson%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90
- Now by Example - Next.js - ZEIT - https://zeit.co/examples/nextjs/
- next.js/examples https://github.com/zeit/next.js/tree/canary/examples