Next.js 简介：基于 React 的 Web 应用程序开发框架 -- 知识铺

Next.js 是一个基于 React 的框架。它能够为 Windows、Linux 和 Mac 等不同平台开发漂亮的 Web 应用程序。

如果您对 React 的经验很少，并且希望了解更多有关 React 生态系统的信息，那么您应该了解 Next.js 框架。

我们简单介绍一下 Next.js。

简介：Next.js基于react、webpack和babel。它是一个用于创建 Web 应用程序的出色工具，并以服务器端渲染而闻名。 Next.js 由 Zeit 构建。具备 HTML、CSS、Java Script 和 React 知识的开发人员可以轻松学习并切换到 next.js。

主要特点：

例子：

function Home() {

return (

<p>Hello Geeks</p>

<style jsx>{`

.container {

margin: 50px;

}

p {

color: blue;

}

`}</style>

</div>

)

}

export default Home

安装和运行 Next.js 应用程序的步骤：

步骤1：安装next.js需要npm和node.js。您可以从这里安装node.js。通过在终端上运行这些命令来确认安装。
```
node -v
npm -v
```
步骤 2：现在在桌面上为您的项目创建一个文件夹，通过代码编辑器导航到文件夹，然后在终端上运行以下命令。
```
npm init -y
npm install --save next react react-dom
```
完成此步骤后，我们的系统中就安装了所有依赖项。现在在 package.json 文件中添加以下脚本

{

  "scripts"``: {

    "dev"``: "next"``,

    "build"``: "next build"``,

    "start"``: "next start"

  }

}

要在浏览器中运行应用程序，请在终端中使用命令 npm start 。
步骤3：在page文件夹中添加一个文件index.js，并在其中添加以下代码。

import React from``'react'``;

import Link from``'next/link'``;

export default class extends React.Component {

    render() {

        return ( {

        <div>

            <h1>Hello Geeks</h1>

            {

                <style jsx>{`

                    a{

                        color:grey;

                        text-decoration:none;

                    }

                `}</style>

            }

        </div>

        )

    }

}
步骤 4：现在通过运行 npm start 启动应用程序。

输出：

参考：https://nextjs.org/docs/getting-started

“这门课程充满了令人惊叹且组织良好的内容！本课程基于项目的方法可以更好地更快地理解概念。此外，现场课程的讲师非常优秀且知识渊博。”- Tejas |德意志银行

通过我们改进的全栈开发计划：掌握 Node.js 和 React，使您能够创建动态 Web 应用程序。

文章目录