@2fn/dashboard 中文文档教程

Question

该项目是通过Create Next App 引导的。

在此处找到本指南的最新版本. 并查看 Next.js 存储库 以获取最新信息。

Table of Contents

• Questions? Feedback?
• Folder Structure
• Available Scripts
• npm run dev
• npm run build
• npm run start
• Using CSS
• Adding Components
• Fetching Data
• Custom Server
• Syntax Highlighting
• Using the static Folder
• Deploy to Now
• Something Missing?

Questions? Feedback?

查看 Next.js FAQ & 文档 或让我们知道您的反馈。

Folder Structure

创建应用程序后，它应该看起来像：

.
├── README.md
├── components
│   ├── head.js
│   └── nav.js
├── next.config.js
├── node_modules
│   ├── [...]
├── package.json
├── pages
│   └── index.js
├── static
│   └── favicon.ico
└── yarn.lock

Next.js 中的路由是基于文件系统的，所以 ./pages/index.js 映射到 / 路由和 ./pages/about.js 将映射到 /about。

./static 目录映射到 next 服务器中的 /static，因此您可以将所有 其他静态资源，例如图像或已编译的 CSS。

开箱即用，我们得到：

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server rendering and indexing of ./pages
• Static file serving. ./static/ is mapped to /static/

阅读更多关于 Next's Routing

Available Scripts

在项目目录中，您可以运行：

npm run dev

运行应用处于开发模式。
在浏览器中打开http://localhost:3000即可查看。

如果您进行编辑，页面将重新加载。
您还将在控制台中看到任何错误。

npm run build

将用于生产的应用构建到 .next 文件夹。
它在生产模式下正确地捆绑了 React，并优化了构建以获得最佳性能。

npm run start

以生产模式启动应用程序。 应首先使用“next build”编译应用程序。

有关详细信息，请参阅 Next 文档中有关部署 的部分。

Using CSS

styled-jsx 与 next 捆绑在一起，以提供对独立作用域 CSS 的支持。 目的是支持类似于 Web Components 的“shadow CSS”，不幸的是 不支持服务器渲染并且仅支持 JS< /a>。

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>
  </div>
)

详细了解 Next 的 CSS 功能。

Adding Components

我们建议将 React 组件保存在 ./components 中，它们应该如下所示：

./components/simple.js

const Simple = () => <div>Simple Component</div>

export default Simple // don't forget to export default!

./components/complex.js

import { Component } from 'react'

class Complex extends Component {
  state = {
    text: 'World'
  }

  render() {
    const { text } = this.state
    return <div>Hello {text}</div>
  }
}

export default Complex // don't forget to export default!

Fetching Data

您可以使用 getInitialProps 在 pages 组件中获取数据，如下所示：

./pages/stars.js

const Page = props => <div>Next stars: {props.stars}</div>

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  const stars = json.stargazers_count
  return { stars }
}

export default Page

对于初始页面加载，getInitialProps 将仅在服务器上执行。 getInitialProps 只会在客户端通过 Link 组件或使用路由 API 导航到不同的路由时执行。

注意：getInitialProps 不能在子组件中使用。 仅在页面中。

阅读有关获取数据的更多信息和组件生命周期

Custom Server

想要使用自定义服务器启动新应用程序吗？ 运行 create-next-app --example customer-server custom-app

通常，您使用 next start 启动下一个服务器。 但是，可以以编程方式 100% 启动服务器以自定义路由、使用路由模式等

。此示例使 /a 解析为 ./pages/b，和 /b 解析为 ./pages/a：

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/b', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/a', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

然后，将您的 start 脚本更改为 NODE_ENV=production node server.js< /代码>。

阅读有关自定义服务器和路由

Syntax Highlighting

的更多信息要在您最喜欢的文本编辑器中配置语法突出显示，前往相关的 Babel 文档页面并按照说明进行操作。 涵盖了一些最受欢迎的编辑器。

Deploy to Now

now 提供零配置单命令部署。

1. 通过推荐的桌面工具或通过带有 npm install 的节点安装 now 命令行工具 - g 现在。

2. 从您的项目目录运行现在。 您将在输出中看到一个 now.sh URL，如下所示：

   > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
   

   构建完成后将该 URL 粘贴到您的浏览器中，您将看到已部署的应用程序。

您可以在now 此处 找到更多详细信息。

Something Missing?

如果您对我们如何改进本自述文件或一般项目有任何想法，请让我们知道或< a href="https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md">贡献一些！