Bắt đầu mạnh mẽ với React và Next.js
Vì vậy, bạn đã thử Tạo ứng dụng React và có thể bạn đang nghĩ, “Chắc chắn rồi, nó rất hay, nhưng nếu tôi muốn tách mã, kiến trúc phổ quát và một bộ định tuyến mạnh mẽ với chi phí cấu hình bằng không?” Nếu vậy thì bạn đang gặp may.
Nhập Next.js từ các kỹ sư cấp cao hơn tại Zeit , một bản soạn thảo đơn giản đã chết để bắt đầu hoạt động với một số tính năng mong muốn nhất của React, miễn thuế.
Bắt đầu mọi thứ theo cách thông thường, cụ thể là bằng cách tạo một folder cho dự án của bạn và khởi tạo nó bằng package.json . Bạn cần thêm các tập lệnh sau vào file đó:
"scripts": { "dev": "next", "build": "next build", "start": "next start" } Bây giờ, hãy tiếp tục và thêm một vài folder : pages , static và components .
Cái cuối cùng đó không bắt buộc phải có, nhưng nó sẽ có ích trong giây lát. 🐿
$ npm install next --save Và đó là nó. Bạn được cấu hình với tất cả chuông và còi. Hãy tìm hiểu cách thức hoạt động
Điều đầu tiên cần lưu ý là mọi file .js trong folder pages sẽ được định tuyến tự động - index.js tuyến đến / ; bite.js tuyến đường tới /bite ; và như thế. Đây cũng là nơi diễn ra quá trình phân tách mã của bạn, với mỗi trang rời rạc nhận được một gói rời rạc hoàn chỉnh với các phụ thuộc theo phạm vi và hiển thị server nếu có.
Tiếp theo, sử dụng CDN để tận dụng bộ nhớ cache của trình duyệt nhằm mang lại hiệu quả trong việc phân phát React. 🚀 Nó có một dự phòng local và có thể được tắt.
Ta có thể để nó ở đó, và mọi thứ sẽ trở nên tuyệt vời khi chúng đứng yên, nhưng chờ đã, còn nhiều thứ nữa.
import Link from 'next/link'; ... <Link href={`about?story=${assets.story}`}>About This Site</Link> Và trong đó nằm ở việc bạn lười tải. Sử dụng thành phần Link của Next nếu có thể và máy móc bên dưới sẽ lấy nó từ đó. Hơn nữa, người quan sát nhạy bén sẽ ghi chú chuỗi truy vấn đó trên href và con mắt sắc sảo đó sẽ được khen thưởng. Các Link được nhấp sẽ nhận được một chỗ dựa được gọi là url , trên đó query có thể được truy cập.
Đây là thời điểm tốt để truy cập lại folder components đó. Với các trang thực hiện tất cả những công việc nặng nhọc này, bạn cần có một nơi để lưu trữ tỷ lệ cược module hơn và kết thúc để giữ cho định tuyến của bạn sạch sẽ.
Một thủ thuật thú vị khác trong tay áo của Next là cậu bé xấu này:
import React from 'react'; import Head from 'next/head'; export default ({title}) => { return <Head> <title>{title}</title> <link rel="stylesheet" href="static/styles.css" /> </Head> } Thành phần Head cho phép bạn cấu hình lại động đầu tài liệu. Rất hữu ích.
import React from 'react'; import css from 'next/css'; let p = css({ color: '#858576', fontSize: 32 }); export default ({caption}) => <p {...p}>{caption}</p> Tương tự hữu ích là việc group bao gồm module CSS nội tuyến Glamour . Các cách cũ cũng hoạt động, tất cả các cách đối với các đối tượng vani và require báo cáo, nhưng nó là một liên lạc tốt.
⚠️️ Cần lưu ý Next sắp ra mắt một bản phát hành lớn (2.xx) sẽ thay đổi các khía cạnh của API của nó và readme trên Github không đồng bộ với version bạn đang cài đặt qua npm (^ 1.2.3).
Và đối với thủ thuật cuối cùng của ta , hãy tập hợp tất cả lại với nhau bằng một chút tìm nạp dữ liệu. Next.js cung cấp getInitialProps trong tất cả vinh quang async/await nó cho nhu cầu thu thập dữ liệu nhưng không đưa ra đơn thuốc nào cho những công cụ khác mà bạn sử dụng. Tất cả những gì thực sự quan trọng là bạn sử dụng thứ gì đó phù hợp như nhau với trình duyệt và server vì nó sẽ chạy trên cả hai.
import React from 'react'; import axios from 'axios'; export default class extends React.Component { static async getInitialProps () { const res = await axios.get('https://api.npmjs.org/downloads/point/last-week/next'); return {nextNpmDownloads: res.data.downloads}; } render () { return <div> {`Did you know Next has had ${this.props.nextNpmDownloads} on npm in the last month?`} </div> } } Tất cả những gì còn lại là kích hoạt server nhà phát triển của bạn chăm sóc npm run dev , hướng trình duyệt của bạn đến cổng 3000 và nói lời chào với sự đơn giản ở dạng phức tạp nhất của nó.
👉 Nếu bạn nghĩ điều đó thật tuyệt, hãy đợi cho đến khi ta triển khai nó.
Các tin liên quan
