Next.js 介绍

Next.js是一个基于反应的框架。它有能力为 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。

主要特点：

• 热代码重新加载：当代码中的更改被保存时，它会自动重新加载应用程序。
• 自动代码拆分：通过此功能，代码中的每个导入都会捆绑并与每个页面一起提供。这意味着页面上永远不会加载不必要的代码。
• 生态系统兼容性：兼容 JavaScript、Node 和 react。
• 服务器渲染：在将 HTML 发送到客户端之前，在服务器上轻松渲染 react 组件。
• Styled-JSX： Styled-JSX 允许您直接在 JavaScript 代码中编写 CSS。

例子：

function Home() {
    return (
        

        
Hello Geeks
        
        
    )
}
  
export default Home

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

• 第一步：安装 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 ( {
            
          // This is Jsx contains HTML
          // code in Javascript}
          
  
              
  Hello Geeks
              {
                  // This is Styled-jsx contains
                  // CSS code in Javascript}
                  
              }
          
          )
      }  
  }
  

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

  输出：
  

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