Bắt đầu với Next.js

Next.js là một khung công tác Node.js rất phổ biến cho phép hiển thị React phía máy chủ dễ dàng và cung cấp nhiều tính năng tuyệt vời khác

Giới thiệu

Làm việc trên một hiện đạiJavaScriptứng dụng được cung cấp bởiPhản ứngthật tuyệt vời cho đến khi bạn nhận ra rằng có một vài vấn đề liên quan đến việc hiển thị tất cả nội dung ở phía máy khách.

Đầu tiên, trang này mất nhiều thời gian hơn để hiển thị cho người dùng, vì trước khi tải nội dung, tất cả JavaScript phải tải và ứng dụng của bạn cần chạy để xác định nội dung sẽ hiển thị trên trang.

Thứ hai, nếu bạn đang xây dựng một trang web công khai, bạn có vấn đề về SEO nội dung. Các công cụ tìm kiếm ngày càng tốt hơn trong việc chạy và lập chỉ mục các ứng dụng JavaScript, nhưng sẽ tốt hơn nhiều nếu chúng ta có thể gửi nội dung cho chúng thay vì để chúng tìm ra.

Giải pháp cho cả hai vấn đề đó làkết xuất máy chủ, còn được gọi làkết xuất trước tĩnh.

Next.js là một trong React framework để thực hiện tất cả những điều này một cách rất đơn giản, nhưng nó không giới hạn ở điều này. Nó được quảng cáo bởi những người tạo ra nó như mộtChuỗi công cụ một lệnh, không cấu hình cho các ứng dụng React.

Nó cung cấp một cấu trúc chung cho phép bạn dễ dàng xây dựng một ứng dụng React giao diện người dùng và xử lý minh bạch kết xuất phía máy chủ cho bạn.

Những đặc điểm chính

Dưới đây là danh sách không đầy đủ các tính năng chính của Next.js:

  • Tải lại mã nóng: Next.js tải lại trang khi phát hiện bất kỳ thay đổi nào được lưu vào đĩa.
  • Định tuyến tự động: bất kỳ URL nào được ánh xạ tới hệ thống tệp, đến các tệp được đưa vàopagesthư mục và bạn không cần bất kỳ cấu hình nào (tất nhiên bạn có các tùy chọn tùy chỉnh).
  • Các thành phần tệp đơn: sử dụngStyled-jsx, được tích hợp hoàn toàn như được xây dựng bởi cùng một nhóm, việc thêm các kiểu trong phạm vi vào thành phần là một điều tầm thường.
  • Kết xuất máy chủ: bạn có thể (tùy chọn) hiển thị các thành phần React ở phía máy chủ, trước khi gửi HTML đến máy khách.
  • Tương thích hệ sinh thái: Next.js hoạt động tốt với phần còn lại của hệ sinh thái JavaScript, Node và React.
  • Tách mã tự động: các trang được hiển thị chỉ với các thư viện và JavaScript mà chúng cần, không cần thêm nữa.
  • Tìm nạp trước: cácLink, được sử dụng để liên kết các trang khác nhau với nhau, hỗ trợprefetchprop tự động tìm nạp trước tài nguyên trang (bao gồm cả mã bị thiếu do tách mã) trong nền.
  • Thành phần động: bạn có thể nhập động các mô-đun JavaScript và Thành phần React (https://github.com/zeit/next.js#dynamic-import).
  • Xuất khẩu tĩnh: sử dụngnext exportlệnh, Next.js cho phép bạn xuất một trang web tĩnh hoàn toàn từ ứng dụng của bạn.

Cài đặt

Next.js hỗ trợ tất cả các nền tảng chính: Linux, macOS, Windows.

Một dự án Next.js được bắt đầu dễ dàng vớinpm:

npm install next react react-dom

Bắt đầu

Tạo mộtpackage.jsontệp với nội dung này:

{
  "scripts": {
    "dev": "next"
  }
}

Nếu bạn chạy lệnh này ngay bây giờ:

npm run dev

tập lệnh sẽ phát sinh lỗi phàn nàn về việc không tìm thấypagesthư mục. Đây là thứ duy nhất mà Next.js yêu cầu để chạy.

Tạo một khoảng trốngpagesthư mục và chạy lại lệnh và Next.js sẽ khởi động máy chủ trênlocalhost:3000.

Nếu bạn truy cập URL đó ngay bây giờ, bạn sẽ được chào đón bởi một trang 404 thân thiện với thiết kế đẹp mắt.

A 404 page returned by Next.js

Next.js cũng xử lý các loại lỗi khác, chẳng hạn như lỗi 500.

Tạo một trang

bên trongpagesthư mục tạo mộtindex.jstệp với một thành phần chức năng React đơn giản:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Nếu bạn đến thămlocalhost:3000, thành phần này sẽ tự động được hiển thị.

Tại sao điều này rất đơn giản?

Next.js sử dụng cấu trúc trang khai báo dựa trên cấu trúc hệ thống tệp.

Các trang nằm trong mộtpagesvà URL trang được xác định bởi tên tệp trang. Hệ thống tệp là API trang.

Kết xuất phía máy chủ

Mở nguồn trang,View -> Developer -> View Sourcevới Chrome.

Như bạn có thể thấy, HTML được tạo bởi thành phần được gửi trực tiếp trong nguồn trang. Nó không được hiển thị phía máy khách mà thay vào đó nó được hiển thị trên máy chủ.

Nhóm Next.js muốn tạo ra trải nghiệm nhà phát triển cho các trang được hiển thị trên máy chủ tương tự như trải nghiệm bạn nhận được khi tạo một dự án PHP cơ bản, chẳng hạn như nơi bạn thả các tệp PHP và bạn gọi chúng và chúng hiển thị dưới dạng trang. Tất nhiên bên trong tất cả đều rất khác nhau, nhưng tính dễ sử dụng rõ ràng là rất rõ ràng.

Thêm trang thứ hai

Hãy tạo một trang khác, trongpages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

Nếu bạn trỏ trình duyệt của mình đếnlocalhost:3000/contacttrang này sẽ được hiển thị. Như bạn có thể thấy, trang này cũng được hiển thị trên máy chủ.

Tải lại nóng

Lưu ý cách bạn không phải khởi động lạinpmquá trình tải trang thứ hai. Next.js thực hiện điều này cho bạn.

Kết xuất khách hàng

Kết xuất máy chủ rất thuận tiện trong quá trình tải trang đầu tiên của bạn, vì tất cả các lý do mà chúng tôi đã thấy ở trên, nhưng khi điều hướng bên trong trang web, kết xuất phía máy khách là chìa khóa để tăng tốc tải trang và cải thiện trải nghiệm người dùng.

Next.js cung cấp mộtLinkthành phần bạn có thể sử dụng để xây dựng liên kết. Hãy thử liên kết hai trang trên.

Thay đổiindex.jsmã này:

import Link from 'next/link'

export default () => ( <div> <p>Hello World!</p> <Link href=’/contact’> <a>Contact me!</a> </Link> </div> )

Bây giờ quay lại trình duyệt và thử liên kết này. Như bạn có thể thấy, trang Liên hệ tải ngay lập tức mà không cần làm mới trang.

Đây là điều hướng phía máy khách hoạt động chính xác, với sự hỗ trợ đầy đủ choAPI lịch sử, có nghĩa là nút quay lại người dùng của bạn sẽ không bị hỏng.

Nếu bạn bây giờcmd-clickliên kết, cùng một trang Liên hệ sẽ mở trong một tab mới, bây giờ máy chủ được hiển thị.

Trang động

Một trường hợp sử dụng tốt cho Next.js là blog, vì nó là thứ mà tất cả các nhà phát triển đều biết cách nó hoạt động và nó rất phù hợp cho một ví dụ đơn giản về cách xử lý các trang động.

Trang động là trang không có nội dung cố định mà thay vào đó hiển thị một số dữ liệu dựa trên một số tham số.

Thay đổiindex.jsđến

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post title=‘Yet another post’ /> <Post title=‘Second post’ /> <Post title=‘Hello, world!’ /> </li> </ul> </div> )

Thao tác này sẽ tạo một loạt các bài đăng và sẽ điền vào tham số truy vấn tiêu đề với tiêu đề bài đăng:

The posts list

Bây giờ hãy tạo mộtpost.jstập tin trongpagesvà thêm:

export default (props) => <h1>{props.url.query.title}</h1>

Bây giờ, nhấp vào một bài đăng sẽ hiển thị tiêu đề bài đăng trong mộth1nhãn:

A single post

Bạn có thể sử dụng URL sạch mà không có tham số truy vấn. Thành phần Liên kết Next.js giúp chúng tôi bằng cách chấp nhận mộtasthuộc tính mà bạn có thể sử dụng để chuyển một slug:

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post slug=‘yet-another-post’ title=‘Yet another post’ /> <Post slug=‘second-post’ title=‘Second post’ /> <Post slug=‘hello-world’ title=‘Hello, world!’ /> </li> </ul> </div> )

CSS-in-JS

Next.js theo mặc định cung cấp hỗ trợ choStyled-jsx, là giải pháp CSS-in-JS được cung cấp bởi cùng một nhóm phát triển, nhưng bạn có thể sử dụng bất kỳ thư viện nào bạn thích, chẳng hạn nhưCác thành phần được tạo kiểu.

Thí dụ:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

Các kiểu được xác định trong phạm vi thành phần, nhưng bạn cũng có thể chỉnh sửa các kiểu chung khi thêmglobalđếnstylethành phần:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

Xuất một trang tĩnh

Ứng dụng Next.js có thể dễ dàng xuất dưới dạng một trang web tĩnh, có thể được triển khai trên một trong những máy chủ lưu trữ trang web tĩnh siêu nhanh, nhưNetlifyhoặc làLưu trữ Firebase, mà không cần thiết lập môi trường Node.

Quá trình này yêu cầu bạn khai báo các URL tạo nên trang web, nhưng nómột quá trình đơn giản.

Triển khai

Dễ dàng tạo một bản sao ứng dụng sẵn sàng sản xuất, không có bản đồ nguồn hoặc công cụ phát triển khác không cần thiết trong bản dựng cuối cùng.

Ở phần đầu của hướng dẫn này, bạn đã tạopackage.jsontệp với nội dung này:

{
  "scripts": {
    "dev": "next"
  }
}

đó là cách để khởi động một máy chủ phát triển bằng cách sử dụngnpm run dev.

Bây giờ chỉ cần thêm nội dung sau vàopackage.jsonthay thế:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

và chuẩn bị ứng dụng của bạn bằng cách chạynpm run buildnpm run start.

Hiện nay

Zeit bây giờ được gọi làVercelvà hướng dẫn này có thể đã lỗi thời

Công ty đằng sau Next.js cung cấp một dịch vụ lưu trữ tuyệt vời cho các ứng dụng Node.js, được gọi làHiện nay.

Tất nhiên, họ tích hợp cả hai sản phẩm của mình để bạn có thể triển khai ứng dụng Next.js một cách liền mạch,một khi bạn đã cài đặt Hiện hành, bằng cách chạynowlệnh trong thư mục ứng dụng.

Hậu trường Bây giờ thiết lập một máy chủ cho bạn và bạn không cần phải lo lắng về bất cứ điều gì, chỉ cần đợi URL ứng dụng của bạn sẵn sàng.

Khu vực

Bạn có thể thiết lập nhiều phiên bản Next.js để nghe các URL khác nhau, nhưng ứng dụng đối với người dùng bên ngoài sẽ trông giống như nó được cung cấp bởi một máy chủ duy nhất:https://github.com/zeit/next.js/#multi-zones

bổ sung

Next.js có danh sách các plugin tạihttps://github.com/zeit/next-plugins

Bộ khởi động trên Glitch

Nếu bạn đang muốn thử nghiệm, tôi khuyên bạn nên sử dụng Glitch. Kiểm tra của tôiNext.js Glitch Starter Kit.

Đọc thêm trên Next.js

Tôi không thể mô tả mọi tính năng của khung công tác tuyệt vời này và nơi chính để đọc thêm về Next.js làdự án readme trên GitHub.

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: