Cách tạo phiên bản sản xuất của ứng dụng Next.js của bạn
Dễ dàng triển khai một ứng dụng được tạo bằng Next.js trong phiên bản sản xuất. Thêm 3 dòng đó vàopackage.json
script
phần:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Chúng tôi đã sử dụngnpm run dev
cho đến nay, để gọinext
lệnh được cài đặt cục bộ trongnode_modules/next/dist/bin/next
. Điều này đã khởi động máy chủ phát triển, cung cấp cho chúng tôibản đồ nguồnvàtải lại mã nóng, hai tính năng rất hữu ích trong khi gỡ lỗi.
Lệnh tương tự có thể được gọi để xây dựng trang web thông quabuild
cờ, bằng cách chạynpm run build
. Sau đó, lệnh tương tự có thể được sử dụng để bắt đầu ứng dụng sản xuất chuyểnstart
cờ, bằng cách chạynpm run start
.
2 lệnh đó là những lệnh chúng ta phải gọi để triển khai thành công phiên bản sản xuất của trang web của chúng ta tại địa phương. Phiên bản sản xuất được tối ưu hóa cao và không đi kèm với bản đồ nguồn và những thứ khác như tải lại mã nóng sẽ không có lợi cho người dùng cuối của chúng tôi.
Vì vậy, hãy tạo một triển khai sản xuất ứng dụng của chúng tôi. Xây dựng nó bằng cách sử dụng:
npm run build
Đầu ra của lệnh cho chúng ta biết rằng một số tuyến đường (/
và/blog
hiện được hiển thị trước dưới dạng HTML tĩnh, trong khi/blog/[id]
sẽ được phục vụ bởi chương trình phụ trợ Node.js.
Sau đó, bạn có thể chạynpm run start
để khởi động máy chủ sản xuất cục bộ:
npm run start
Tham quanhttp://localhost:3000sẽ hiển thị cho chúng tôi phiên bản sản xuất của ứng dụng, tại địa phương.
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:
- Bắt đầu với Next.js
- Next.js vs Gatsby vs create-react-app
- Cách cài đặt Next.js
- Liên kết hai trang trong Next.js bằng Liên kết
- Nội dung động trong Next.js với bộ định tuyến
- Cung cấp dữ liệu cho thành phần Next.js bằng getInitialProps
- Tạo kiểu cho các thành phần Next.js bằng CSS
- Tìm nạp trước nội dung trong Next.js
- Sử dụng bộ định tuyến để phát hiện liên kết hoạt động trong Next.js
- Xem nguồn để xác nhận SSR đang hoạt động trong Next.js
- Next.js: điền thẻ head bằng các thẻ tùy chỉnh
- Triển khai ứng dụng Next.js ngay bây giờ
- Next.js: chỉ chạy mã ở phía máy chủ hoặc phía máy khách trong Next.js
- Triển khai ứng dụng Next.js trong phiên bản sản xuất
- Cách phân tích các gói ứng dụng Next.js
- Các mô-đun tải chậm trong Next.js
- Thêm thành phần trình bao bọc vào ứng dụng Next.js của bạn
- Các biểu tượng được Next.js thêm vào ứng dụng của bạn
- Gói ứng dụng Next.js
- Cách sử dụng Bộ định tuyến Next.js
- Cách sử dụng các tuyến API Next.js
- Cách lấy cookie phía máy chủ trong ứng dụng Next.js
- Cách thay đổi cổng ứng dụng Next.js