openSUSE Leap 16

Next.js : インストール2025/12/04

 

React ベースの Web 開発フレームワーク Next.js のインストールです。

[1]

こちらを参考に Node.js をインストールしておきます

[2] 任意の一般ユーザーで Next.js テストアプリケーションを作成します。
suse@dlp:~>
mkdir testproject

suse@dlp:~>
cd testproject
# Next.js アプリケーション [test-app] 作成

suse@dlp:~/testproject>
npx create-next-app test-app

Need to install the following packages:
create-next-app@16.0.7
Ok to proceed? (y)

✓ Would you like to use the recommended Next.js defaults? > Yes, use recommended defaults
Creating a new Next.js app in /home/suse/testproject/test-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

.....
.....

added 358 packages, and audited 359 packages in 33s

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Generating route types...
✓ Types generated successfully

Initialized a git repository.

Success! Created test-app at /home/suse/testproject/test-app

suse@dlp:~/testproject>
cd test-app
# 開発用サーバーを起動

suse@dlp:~/testproject/test-app>
npm run dev


> test-app@0.1.0 dev
> next dev

   ▲ Next.js 16.0.7 (Turbopack)
   - Local:         http://localhost:3000
   - Network:       http://10.0.0.30:3000

 ✓ Starting...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

 ✓ Ready in 595ms

# または ビルド & プロダクションモードでサーバーを起動

suse@dlp:~/testproject/test-app>
npm run build


.....
.....

○  (Static)  prerendered as static content

suse@dlp:~/testproject/test-app> npm start 

> test-app@0.1.0 start
> next start

   ▲ Next.js 16.0.7
   - Local:         http://localhost:3000
   - Network:       http://10.0.0.30:3000

 ✓ Starting...
 ✓ Ready in 405ms
  任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。
関連コンテンツ