Help us understand the problem. What is going on with this article?

Next.jsまとめ

Next.jsを使ってブログ作ったが色々とだめすぎたので調べたことをまとめて作るために書く記事。
間違ってたりするかもだけど忘備録だからあんまり怒らないで。。。
てことで始めます。

Node.jsのインストール

Next.jsはNode.jsのReactのフレームワークみたいなやつなので色々入れます。
まずはNode.js
基本的にNode.jsの公式サイトからダウンロードすれば問題ない。
これは普通にexeとかからインストールしよう。
Node.js
バカでもこれくらいはできるはず

作業するディレクトリを作る

ディレクトリ内にNext.jsとReactをインストールしていくのでディレクトリを作成しましょう。
デスクトップとかにドメイン名のディレクトリとか作ったらいいんじゃないのかな
そんでcd 作ったディレクトリ名みたいなのをコマンドプロンプトとかで実行してディレクトリ移動してね

node_modulesを設定する

npm init -y

これを実行したらpackage.jsonってファイルができると思います。
それが設定ファイルみたいなのになります

ReactとNext.jsのインストール

npm install --save react react-dom next

これを実行したらReactとNext.jsがインストールされます。
簡単ですね^^

package.jsonに設定を記述する

設定を記述するとかなんかむずそうなこと言ってますが開発用のサーバーを起動する設定するだけです

package.json
{
  "name": "re-nixo-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.jsonの中身はこんな感じになっているとおもうのでscriptsの中身を変更します
"test": "echo \"Error: no test specified\" && exit 1"
を削除して

"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start -p 8010"

に変更します

トップページを作成する

next.jsのページはpagesというディレクトリにJavaScriptファイルを作成して作成します。
pagesというディレクトリをpackages.jsonと同じディレクトリに作成します。
そして、pagesの中にindex.jsというJavaScriptファイルを作成します。
これがトップページです。
トップページのコードを書いていきます。

pages/index.js
import Head from "next/head"
import Link from "next/link"

export default function Index() {
    var index = (
        <html>
            <Head>
                <meta charSet="UTF-8"/>
                <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
                <title>トップページ</title>
            </Head>
            <body>
                <h1>HelloWorld</h1>
            </body>
            <style jsx>{`
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                }
                h1 {
                    text-align: center;
                }
            `}</style>
        </html>
    )
    return index
}

これをindex.jsにコピペして、

npm run dev

を実行して、localhost:3000にアクセスするとHelloWorldと表示されると思います。

静的ファイルを配置する

今回は画像を読み込ませます。
Next.jsはpublicまたはsrcという名前のディレクトリに静的ファイルを配置します。
どちらでも動きますが、publicのほうがなんかいいね!
ということで静的ファイルを配置します。
package.jsonと同じディレクトリにpublicというディレクトリを作成します。
そこに画像とかを配置してください。
そして、index.jsbodyにhtmlと同じように書きます。
image.pngというファイル名の画像の場合は

<img src="/image.png" width="100%" height="auto"/>

のように記述します。
すると読み込まれます。

サーバーで公開する方法

本当に苦戦しました。
npm run exportでエクスポートしたものを公開したらアクセスはできるものの直URLでアクセスすると404になったり再読込すると404になったりするのでサーバーでnpm run buildをしたあとにnpm run startをし、リバースプロキシを使用し、公開することに成功しました。
えー、ずっと苦戦し、いろんな海外サイトを飛び回っていたら現在朝の6:31分です。
本当に疲れました。
なので忘れないように書いておきます。

まず、サーバーにプロジェクトファイルをアップロードし、サーバーでも

npm install --save react react-dom next

を実行します。
そして、npm run buildをし、screenを開きログアウトしても閉じないようにし、npm run startをします。
すると、localhost:8010でサーバーが開かれます。
8010というポートはpackage.jsonに書いた

"start": "next start -p 8010"

の8010です。ここを変えることでポートを変更することができます。
ポート8010で開いた、という体で進めます。
ポート開放が必要なのかわかりませんが一応しておきます。
ルーター側でもしておいたほうがいいかも

sudo ufw allow 8010
sudo ufw reload

そして、VirtualHostの設定に、

virtual-host.conf
<VirtualHost *:80>
    LoadModule ssl_module modules/mod_ssl.so
    LoadModule proxy_module modules/mod_proxy.so
    ServerName ドメイン名

    ProxyRequests Off
    ProxyPass / http://localhost:8010/
    ProxyPassReverse / http://localhost:8010/
</VirtualHost>

のように記述します。
これだけだとエラーが出ます。(4時間苦戦した)
なのでこの記事の通り色々有効化します。
https://stackoverflow.com/questions/23931987/apache-proxy-no-protocol-handler-was-valid

sudo a2enmod ssl
sudo a2enmod proxy
sudo a2enmod proxy_balancer
sudo a2enmod proxy_http

するとアクセスができるようになり、SSRも有効だと思います。
表示が早いね!

本当に疲れました。
ではまた。。。

nikun
Pythonが好きです
https://nixo.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away