Next.js,一个流行的 React 框架,为构建 Web 应用程序提供了一个强大的工具包。AlmaLinux 9以其安全性和可靠性而闻名,是托管Next.js项目的绝佳选择。
在 AlmaLinux 9 上安装 Next.js
第 1 步。在开始安装过程之前,请确保您的 AlmaLinux 9 系统是最新的。在终端中运行以下命令:
<span class="pln">sudo dnf update sudo dnf install epel</span><span class="pun">-</span><span class="pln">release</span>
第 2 步。安装节点.js。
首先,运行以下命令以检查列表存储库模块中的 ”。nodejs
<span class="pln">sudo dnf </span><span class="kwd">module</span><span class="pln"> list nodejs</span>
接下来,运行下面的 dnf
命令以启用存储库模块 ‘nodejs’ v20。出现提示时输入“y”,然后按回车键。
<span class="pln">sudo dnf </span><span class="kwd">module</span><span class="pln"> enable nodejs</span><span class="pun">:</span><span class="lit">20</span>
现在,安装 Node.js 和 npm:
<span class="pln">sudo dnf install nodejs</span>
通过检查节点.js和 npm 版本来验证安装:
<span class="pln">node </span><span class="pun">-</span><span class="pln">v npm </span><span class="pun">-</span><span class="pln">v</span>
第 3 步。在AlmaLinux 9上安装Next.js。
安装 Node.js 后,您可以继续安装 Next.js。以下是在AlmaLinux 9上安装Next.js的两种方法:
- 方法 1:使用 npx
运行以下命令以创建新的 Next.js 项目:
<span class="pln">npx create</span><span class="pun">-</span><span class="kwd">next</span><span class="pun">-</span><span class="pln">app </span><span class="kwd">my</span><span class="pun">-</span><span class="kwd">next</span><span class="pun">-</span><span class="pln">app</span>
这将在名为 my-next-app 的目录中创建一个新的 Next.js 项目。
导航到项目目录:
<span class="pln">cd </span><span class="kwd">my</span><span class="pun">-</span><span class="kwd">next</span><span class="pun">-</span><span class="pln">app</span>
启动开发服务器:
<span class="pln">npm run dev</span>
这将启动开发服务器,您可以通过访问访问 Next.js 应用程序
<span class="pln">http</span><span class="pun">:</span><span class="com">//localhost:3000 in your web browser.</span>
- 方法 2:使用 npm
运行以下命令以安装 Next.js 包:
<span class="pln">npm install </span><span class="kwd">next</span>
为 Next.js 项目创建一个新目录:
<span class="pln">mkdir </span><span class="kwd">my</span><span class="pun">-</span><span class="kwd">next</span><span class="pun">-</span><span class="pln">app</span>
导航到项目目录:
<span class="pln">cd </span><span class="kwd">my</span><span class="pun">-</span><span class="kwd">next</span><span class="pun">-</span><span class="pln">app</span>
创建一个名为 index.js 的新文件:
<span class="pln">touch index</span><span class="pun">.</span><span class="pln">js</span>
在文本编辑器中打开 index.js 文件并添加以下代码:
<span class="kwd">const</span> <span class="pun">{</span><span class="pln"> createServer </span><span class="pun">}</span> <span class="pun">=</span> <span class="kwd">require</span><span class="pun">(</span><span class="str">'http'</span><span class="pun">)</span> <span class="kwd">const</span> <span class="kwd">next</span> <span class="pun">=</span> <span class="kwd">require</span><span class="pun">(</span><span class="str">'next'</span><span class="pun">)</span> <span class="kwd">const</span><span class="pln"> app </span><span class="pun">=</span> <span class="kwd">next</span><span class="pun">({</span><span class="pln"> dev</span><span class="pun">:</span><span class="pln"> process</span><span class="pun">.</span><span class="pln">env</span><span class="pun">.</span><span class="pln">NODE_ENV </span><span class="pun">!==</span> <span class="str">'production'</span> <span class="pun">})</span> <span class="kwd">const</span><span class="pln"> handle </span><span class="pun">=</span><span class="pln"> app</span><span class="pun">.</span><span class="pln">getRequestHandler</span><span class="pun">()</span><span class="pln"> app</span><span class="pun">.</span><span class="pln">prepare</span><span class="pun">().</span><span class="kwd">then</span><span class="pun">(()</span> <span class="pun">=></span> <span class="pun">{</span><span class="pln"> createServer</span><span class="pun">((</span><span class="pln">req</span><span class="pun">,</span><span class="pln"> res</span><span class="pun">)</span> <span class="pun">=></span> <span class="pun">{</span><span class="pln"> handle</span><span class="pun">(</span><span class="pln">req</span><span class="pun">,</span><span class="pln"> res</span><span class="pun">)</span> <span class="pun">}).</span><span class="pln">listen</span><span class="pun">(</span><span class="lit">3000</span><span class="pun">,</span> <span class="pun">(</span><span class="pln">err</span><span class="pun">)</span> <span class="pun">=></span> <span class="pun">{</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">err</span><span class="pun">)</span> <span class="kwd">throw</span><span class="pln"> err console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'> Ready on http://localhost:3000'</span><span class="pun">)</span> <span class="pun">})</span> <span class="pun">})</span>
保存文件并将其返回到终端。index.js
启动开发服务器:
<span class="pln">npm run dev</span>
这将启动开发服务器,您可以通过访问访问 Next.js 应用程序
<span class="pln">http</span><span class="pun">:</span><span class="com">//localhost:3000 in your web browser.</span>
感谢您使用本教程在您的 AlmaLinux 9 系统上安装 Next.js。有关其他帮助或有用信息,我们建议您查看 Next.js官方网站。