タグ「next.js」での検索

pm2で next.js を動作させる

● 1. pm2 のインストール

 npm install pm2@latest -g

● 2. app.json の作成

vi app.json

app.json を次の内容で保存する

{
  "name" : "nextjs",
  "script" : "./node_modules/next/dist/bin/next",
  "env" : {
    "NODE_ENV" : "development"
  },
  "env_production" : {
    "NODE_ENV" : "production"
  }
}

"name" : "nextjs", としているので、アプリ名は nextjs になります。

● 3. pm2の起動(pm2で next.js を動作させる)

pm2 start app.json --env production

起動すると nextjs というアプリがリストに表示されます。

● pm2のコマンド

プロセスの状態を見る

pm2 ls

「nextjs」という名前のアプリを停止する

pm2 stop nextjs

「nextjs」という名前のアプリをプロセスリストからする

pm2 delete nextjs

「nextjs」という名前のアプリをリスタートする

pm2 restart app_name

● pm2 を サーバーマシン起動時に自動実行するように設定する

pm2 を自動起動させる( centos )

pm2 startup

● pm2自動起動時の起動プロセスを保存

pm2 を自動起動させる

pm2 save
No.1907
11/23 15:20

edit

next.js

(Next.js) next.js サイトのインストールと起動

● next.js サイトのインストールと起動(create-next-app コマンド)

npx create-next-app

実行するとサイト名を

What is your project named? … 

と聞かれますので入力します。( 例: test-app)

アプリ名を指定して新規作成する場合は

npx create-next-app --example parameterized-routing test-app

のようにすると

example指定: parameterized-routing
アプリ名: test-app

で新規作成します。

Next.js公式examples集を分類

https://bit.ly/396iZE8

next.js の 起動 ( 1. dev )

npm run dev

next.js の 起動 ( 2. build & start )

npm run build
npm run start

next.js の ページを追加する

新規ファイルを作成

vi pages/page01.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div>
      <h1>Hello page01</h1>
    </div>
  )
}

これが URL
http://localhost:3000/page01

にあたります。

ボタンの作成

<Link href="/page02">
  <button>page02</button>
</Link>

● 静的サイトとしてビルドする

package.json

{
  "scripts": {
    ...
    "build_static": "next build && next export -o dist",
  },

( "build_static"の行を追加します )

ビルドの実行

npm run build_static

/dist/ フォルダに書出が行われます。

● examples

https://github.com/vercel/next.js/tree/master/examples

No.1902
11/22 14:42

edit

next.js