はじめに

Next.jsで作成したWebアプリをネット上に載せる情報があまりなかったので、主に手順を説明する記事を作成しようと思いました。

準備

以下のサイトを参考にしてください。

Node.js

windows
https://magazine.techacademy.jp/magazine/16050

Git

windows
https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c
mac
https://zenn.dev/mesgory/articles/948876ac1b7517

GitHub

VSCode

windows
https://qiita.com/YurimyMiyu/items/5ce7821f1e3e5905c3ee
mac
https://qiita.com/cleyera_f/items/24bf47321fb3af05714f

Vercel

環境

mac OS：14.4.1
VSCode：1.89.0
Node.js：20.12.2
Next.js：14.2.4
Git：2.39.3

公開までの手順

プロジェクト作成

ここからプロジェクトを作成していきます。
まず、プロジェクトフォルダを入れるディレクトリを作成します。私は、next_testというディレクトリを作成しました。
次にターミナルでそのディレクトリへ移動してください。「cd ディレクトリ名」で移動できます。

xxxxxxxx:next_test xxxxx$

ターミナルがこのようになったらOKです。
次に

npx create-next-app@latest

とターミナルに入力して実行してください。そうすると、

? What is your project named? › my-app

このように表示されると思います。
my-appの部分に任意のプロジェクト名を記述します。
今回はこのままmy-appでいきます。
プロジェクト名を決めてEnterを押すと、いくつか質問が来ると思います。

このように回答してください。
実行してSuccessと出たら成功です。
next_testフォルダ内を見てみると、my-appフォルダができていることがわかります。
次にmy-appフォルダをVSCodeで開いてください。

このような画面になっているはずです。
ここで一部分だけ変更します。
next.config.mjsがデフォルトで、

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

このようになっていると思いますが、

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export'
};

export default nextConfig;

このように変更してください。
この設定をすることで、VercelやGitHub Pagesへデプロイできるようになります。

手を加えるファイルはまだこれだけです。

ローカルで確認

ではローカルでこのプロジェクトを確認してみたいと思います。
⌘+JでVSCode内にてターミナルを開いてください。
そこで

yarn dev

と入力して実行してください。
すると、

yarn run v1.22.22
$ next dev
 ⚠ Port 3000 is in use, trying 3001 instead.
 ⚠ Port 3001 is in use, trying 3002 instead.
  ▲ Next.js 14.2.4
  - Local:        http://localhost:3002

 ✓ Starting...
 ✓ Ready in 2.6s

このような出力がされると思います。
私はポート3000と3001使ってしまっているため、localhosy:3002へアクセスする必要がありますが、基本的にはlocalhost:3000になっていると思います。
そしたら、http://localhost:3000
にアクセスしてみてください。

このように開けたら成功です。
これはデフォルトなのでイメージとしては、これを自分なりに編集してwebアプリケーションを作成していきます。

GitHubにコミット・プッシュ

ではこれをGitHubにコミット・プッシュしていきます。
まずGitHub上でレポジトリーを作成します。

この画面の右上の「New」ボタンを押してレポジトリーを作成していきます。

この画面で任意のレポジトリーの名前を決めていきます。
私はNext_Test_Appにしました。
このレポジトリーの名前がサイトのURLで使用されます。
この他は手を加えなくて大丈夫です。
Create Repositoryボタンを押すと、

この画面になります。
上の囲っている部分を一つずつVSCode内のターミナルで実行していきます。
まず、さっきのとは別のターミナルを開きたいので、右側にある「＋」ボタンを押して、ターミナルを開きます。
そこでさっきのを実行します。
実行が終わり、GitHubをリロードして確認すると、フォルダやファイルがたくさんあると思います。これで、最初のコミット・プッシュは成功です。

GitHub Pagesを設定

次に、GitHub Pagesを設定します。
GitHubサイトで「Settings」->「Pages」を開いてください。

この画面になるはずです。
このBranchのところのNoneをmainへ変えて、saveボタンを押してください。
これでGitHub Pagesの設定はOKです。

VSCodeで少し編集

少しサイトを編集します。
まずターミナルで

npx shadcn-ui@latest init

を実行します。
これも３つほど質問が来るのですが、答え方は、Default、Zinc、yesの順番で答えてください。
次に

npm install tailwindcss-animate

を実行します。
そしてyarn devを実行したターミナルをもう一度開いて「control+c」で実行を抜けて、もう一度

yarn dev

を実行してください。
次に以下のように指定のファイルを変更してください。

page.tsx

export default function Home() {
  return (
    <div>
        <h2 className="font-bold" style={{fontSize: `20px`, margin: `3%`}}>
          ホーム画面
        </h2>
    </div>
  );
}

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import { cn } from "@/lib/utils";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
const navItems = [
  { label: 'home', href: '/'},
  { label: 'about', href: '/about'},
  { label: 'content', href: '/content'},
]

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={cn(inter.className, 'min-h-dvh')} style={{background: `#F2F2F2`,}}>
      <header className="container h-16 flex items-center border-b justify-between" style={{background: `#FFF`}}>
          <h1 className="font-bold">next-test-app</h1>
          <ul className="flex gap-4">
            {navItems.map(item => <li key={item.label}>
              <button>
                <Link href={item.href}>{item.label}</Link>
              </button>
            </li>)}
          </ul>
        </header>
        {children}
      <footer className="container sticky top-full h-16 flex items-center border-t">
      <p>next-test-app</p>
      </footer>
      </body>
    </html>
  );
}

次にappフォルダ下にaboutフォルダとcontentフォルダを作成してください。
そしてどちらのフォルダにもpage.tsxを作成してください。
中身は以下のように。

./app/about/page.tsx

"use client"
export default function About() {
    return (
      <div>
          <h2 className="font-bold" style={{fontSize: `20px`, margin: `3%`}}>
            about画面
          </h2>
      </div>
    );
}

./app/content/page.tsx

"use client"
export default function Content() {
    return (
      <div>
          <h2 className="font-bold" style={{fontSize: `20px`, margin: `3%`}}>
            content画面
          </h2>
      </div>
    );
}

今フォルダは

こんな感じになっています。
これでVSCodeでの編集は以上です。

コミット・プッシュ

ではコミット・プッシュしていきます。
VSCodeの左のバーから、ソース管理を選択します。
すると、

このような画面になるはずです。
このメッセージのところに「２回目コミット」と入力し、「コミット」ボタンを押してください。
次に「変更の同期」ボタンを押してください。
そうしたら変更部分のコミット・プッシュは完了です。
GitHubで確認してみましょう。

このように、２回目コミットと書かれたファイル・フォルダがたくさんあったら成功です。

Vercelを設定し、公開

最後にVercelを設定し、公開できるようにします。
https://vercel.com
にアクセスしてください。
GitHubと連携してログインすると、

この画面になるはずです。
このデプロイしたいレポジトリのImportボタンを押してください。

そしたらdeployボタンを押してデプロイを開始してください。
デプロイが完了すると、

この画面になります。
Continue to Dashboardボタンを押すと、

この画面になり、DomainsのURLをクリックすると、自分が公開したwebサイトを閲覧することができます。
これでVercelを使って公開ができました。

公開してからの編集方法

ここからは公開してからの編集方法について説明します。

VSCodeで編集

まずVSCodeで編集します。
VSCodeのターミナル上で

npx shadcn-ui@latest add button

これを実行してください。
次に以下のようにファイルの内容を変更してください。

./app/page.tsx

import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function Home() {
  return (
    <div className='flex flex-col items-center'> 
        <div className='flex flex-col items-center' style={{background: `#FFF`, margin:`20%`, marginTop: '5%', marginBottom: '5%', padding: `5%`, paddingBottom: `2%`, paddingTop: `2%`, width: '90%'}}>
          <h2 className="font-bold" style={{fontSize: `25px`}}>
            home
          </h2>
        </div>
        <div className='flex flex-col items-center' style={{background: `#FFF`, margin:`20%`, marginTop: '0%', marginBottom: '5%', padding: `5%`, width: '60%'}}>
          <h3 className="font-bold" style={{fontSize: `20px`, marginTop: '5%'}}>
            about画面はこちらから
          </h3>
          <Button variant="destructive" asChild style={{margin: `5%`}}>
            <Link href="/about">about</Link>        
          </Button>
        </div>
        <div className='flex flex-col items-center' style={{background: `#FFF`, margin:`20%`, marginTop: '5%', marginBottom: '5%', padding: `5%`, width: '60%'}}>
          <h3 className="font-bold" style={{fontSize: `20px`, marginTop: '5%'}}>
            content画面はこちらから
          </h3>
          <Button variant="destructive" asChild style={{margin: `5%`}}>
            <Link href="/content">content</Link>              
          </Button>
        </div>
       
    </div>
  );
}

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
const navItems = [
  { label: 'home', href: '/'},
  { label: 'about', href: '/about'},
  { label: 'content', href: '/content'},
]

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={cn(inter.className, 'min-h-dvh')} style={{background: `#F2F2F2`,}}>
      <header className="container h-16 flex items-center border-b justify-between" style={{background: `#FFF`}}>
          <h1 className="font-bold">next-test-app</h1>
          <ul className="flex gap-4">
            {navItems.map(item => <li key={item.label}>
              <Button variant="ghost" asChild>
                <Link href={item.href}>{item.label}</Link>
              </Button>
            </li>)}
          </ul>
        </header>
        {children}
      <footer className="container sticky top-full h-16 flex items-center border-t">
      <p>next-test-app</p>
      </footer>
      </body>
    </html>
  );
}

ローカル上で確認

変更したらlocalhostにアクセスして変更内容を確認してください。

このようになったらOKです。
エラーが起きてなくて問題なさそうだったら次に進みます。

GitHubにコミット・プッシュ

次はGitHubにコミット・プッシュします。
これは最初にGitHubへコミット・プッシュした時と同じです。
左側のバーからソース管理を開いて、コミットメッセージを書き、コミットしてください。
今回は３回目コミットというメッセージにします。
そうしたら変更の同期ボタンを押してプッシュします。
無事にプッシュできたらGitHubのActionsからうまくビルド・デプロイできているか確認してください。

Vercelで反映されるまで待つ

Vercelを開いてください。

開いてこの画面になっていたらVercel側でもデプロイ完了です。
エラーがあってデプロイがうまくいかなかった場合、「To update your Production Deployment, push to the "main" branch」のところにデプロイエラーの内容が書いてあるので、そこを確認してください。

webを確認

先ほどのwebサイトをリロードすると変更内容が反映されると思います。

最後に

ぜひ新しくプロジェクトを作成して自分なりのNext.js開発をしてみてください。