Hướng dẫn next js mongodb - js mongodb tiếp theo

Bạn đang xây dựng ứng dụng tuyệt vời tiếp theo của mình với Next.js? Bạn có ước bạn có thể tích hợp MongoDB vào ứng dụng tiếp theo của mình một cách dễ dàng không? Bạn có cần thực hiện việc này trước khi cà phê của bạn hoàn thành sản xuất bia? Nếu bạn trả lời có cho ba câu hỏi này, tôi có một số tin tốt cho bạn. Chúng tôi đã tạo ra một tích hợp chính thức tiếp theo.jsmongodb sẽ giúp bạn và chạy trong vài phút, và bạn có thể xem xét hướng dẫn này hướng dẫn chính thức của bạn về cách sử dụng nó.Next.js? Do you wish you could integrate MongoDB into your Next.js app effortlessly? Do you need this done before your coffee is done brewing? If you answered yes to these three questions, I have some good news for you. We have created an official Next.js<>MongoDB integration that will have you up and running in minutes, and you can consider this tutorial your official guide on how to use it.

Trong hướng dẫn này, chúng ta sẽ xem xét cách chúng ta có thể sử dụng ví dụ With-mongoDB để tạo ứng dụng mới tiếp theo. Chúng tôi cũng sẽ xem xét cách sử dụng MongoDB trong ứng dụng tiếp theo của chúng tôi với những thứ như serversidprops và API. Cuối cùng, chúng tôi sẽ xem xét cách chúng tôi có thể dễ dàng triển khai và lưu trữ ứng dụng của mình trên Vercel, nền tảng lưu trữ chính thức cho các ứng dụng Next.js. Nếu bạn đã có một ứng dụng tiếp theo.js hiện có, đừng lo lắng, chỉ cần thả tệp tiện ích MongoDB vào dự án hiện tại của bạn và bạn rất tốt để đi. Chúng tôi có rất nhiều thứ thú vị để che đậy, vì vậy hãy đi sâu vào!with-mongodb example to create a new Next.js application that follows MongoDB best practices for connectivity, connection pool monitoring, and querying. We'll also take a look at how to use MongoDB in our Next.js app with things like serverSideProps and APIs. Finally, we'll take a look at how we can easily deploy and host our application on Vercel, the official hosting platform for Next.js applications. If you already have an existing Next.js app, not to worry, simply drop in the MongoDB utility file into your existing project and you are good to go. We have a lot of exciting stuff to cover, so let's dive right in!

Điều kiện tiên quyết

Đối với hướng dẫn này, bạn sẽ cần:

React và Next.js quen thuộc dự kiến ​​sẽ tận dụng tối đa hướng dẫn này, nhưng tôi sẽ cố gắng bao gồm các tính năng độc đáo với độ sâu đủ để vẫn có giá trị đối với người mới.

Tiếp theo là gì

Nếu bạn chưa quen thuộc, Next.js là khung dựa trên phản ứng để xây dựng các ứng dụng web hiện đại. Framework bổ sung rất nhiều tính năng mạnh mẽ như kết xuất phía máy chủ, phân tách mã tự động, tái tạo tĩnh gia tăng và nhiều hơn nữa giúp dễ dàng xây dựng các ứng dụng sẵn sàng sản xuất và mở rộng.Next.js is a React based framework for building modern web applications. The framework adds a lot of powerful features such as server side rendering, automatic code splitting, incremental static regeneration and much more that make it easy to build scalable and production ready apps.

Bắt đầu với Mongodb

Next.js có một thư viện ví dụ mở rộng cho thấy cách bạn có thể tích hợp khung với các tính năng khác nhau như máy chủ GraphQL, thư viện xác thực hoặc Frameworks CSS. Ví dụ mà chúng tôi sẽ sử dụng cho bài đăng này được gọi là với mongodb và như bạn có thể mong đợi nó sẽ đi kèm với mọi thứ cần thiết để kết nối với cơ sở dữ liệu MongoDB.GraphQL servers, authentication libraries, or CSS frameworks. The example we'll use for this post is called with-mongodb and as you might expect it'll come with everything needed to connect to a MongoDB database.

Để tạo một ứng dụng mới.js tiếp theo với tích hợp MongoDB tích hợp, hãy thực hiện lệnh sau trong thiết bị đầu cuối của bạn:

Chúng tôi đang sử dụng lệnh npx create-next-app và đang chuyển tham số --example with-mongodb sẽ cho create-next-app biết để khởi động ứng dụng của chúng tôi với ví dụ tích hợp MongoDB. Cuối cùng mflix là tên của ứng dụng của chúng tôi. Bạn có thể đặt tên cho ứng dụng của bạn một cái gì đó khác nếu bạn thích. Thực hiện lệnh này sẽ mất vài giây để tải xuống và cài đặt tất cả các phụ thuộc NPM, nhưng sau khi chúng được tải xuống và cài đặt, điều hướng đến thư mục dự án của bạn bằng cách chạy:npx create-next-app command and are passing the --example with-mongodb parameter which will tell create-next-app to bootstrap our app with the MongoDB integration example. Finally mflix is the name of our application. You can name your application something else if you'd prefer. Executing this command will take a couple of seconds to download and install all the npm dependencies, but once they're downloaded and installed, navigate to your project directory by running:

Chạy lệnh trên trong phiên bản nút> 18 sẽ gây ra lỗi như sau:

Vấn đề là trong node-tar extract() phát ra sự kiện gần gũi. Có một vấn đề GitHub mở để giải quyết vấn đề này hoặc bạn có thể làm theo các bước sau:node-tar extract() which emits the close event. There is a GitHub issue open to address this, or you can follow these steps:

Sử dụng node version < 18 hoặc loại Y để tải mẫu mặc định được tải xuống:node version < 18 or type Y to get the default template downloaded:

Sau đó, điều hướng đến thư mục dự án bằng cách chạy:

Và sau đó cài đặt tất cả các phụ thuộc NPM bằng cách chạy:

Trong thư mục này, hãy bắt đầu ứng dụng của chúng tôi và xem điều gì sẽ xảy ra. Để bắt đầu ứng dụng tiếp theo của chúng tôi, trong thư mục mflix thực thi:mflix directory execute:

Khi ứng dụng được xây dựng, hãy xem ứng dụng của chúng tôi hoạt động bằng cách điều hướng đến localhost:3000. Uh-oh. Chúng tôi đã gặp lỗi.localhost:3000. Uh-oh. We got an error.

Tin tốt là lỗi này khá mô tả. Lý do cho lỗi này là vì chúng tôi chưa cung cấp chuỗi kết nối MongoDB của chúng tôi cho ứng dụng tiếp theo. Hãy làm điều đó tiếp theo.

Kết nối MongoDB với Next.js

Nếu chúng ta xem thư mục ứng dụng tiếp theo của mình, chúng ta sẽ tìm thấy tệp env.local.example. Hãy đổi tên tệp này thành --example with-mongodb0 và mở nó. Tệp này sẽ chứa một thuộc tính mà chúng ta sẽ cần điền: --example with-mongodb1.env.local.example file. Let's rename this file to --example with-mongodb0 and open it. This file will contain one properties that we'll need to fill out: --example with-mongodb1.

Chúng tôi sẽ nhận được thông tin này từ cụm Atlas MongoDB của chúng tôi. Bạn có thể sử dụng cài đặt MongoDB cục bộ nếu bạn có, nhưng nếu bạn mới bắt đầu, MongoDB Atlas là một cách tuyệt vời để đứng dậy và chạy mà không phải cài đặt hoặc quản lý phiên bản MongoDB của bạn. MongoDB Atlas có tầng miễn phí mãi mãi mà bạn có thể đăng ký cũng như lấy dữ liệu mẫu mà chúng tôi sẽ sử dụng cho phần còn lại của hướng dẫn này.MongoDB Atlas Cluster. You can use a local MongoDB installation if you have one, but if you're just getting started, MongoDB Atlas is a great way to get up and running without having to install or manage your MongoDB instance. MongoDB Atlas has a forever free tier that you can sign up for as well as get the sample data that we'll be using for the rest of this tutorial.

Để có được URI MongoDB của chúng tôi, trong bảng điều khiển Atlas MongoDB của chúng tôi, hãy nhấn nút Kết nối. Sau đó, nút kết nối với ứng dụng của bạn và ở đây bạn sẽ thấy một chuỗi chứa URI của bạn sẽ trông như thế này:Connect button. Then the Connect to your application button, and here you'll see a string that contains your URI that will look like this:

Nếu bạn chưa quen với MongoDB Atlas, bạn sẽ cần truy cập phần truy cập cơ sở dữ liệu và tạo tên người dùng và mật khẩu, cũng như tab truy cập mạng để đảm bảo IP của bạn được phép kết nối với cơ sở dữ liệu. Tuy nhiên, nhưng nếu bạn đã bật người dùng cơ sở dữ liệu và truy cập mạng, bạn sẽ chỉ cần thay thế các trường --example with-mongodb2 và --example with-mongodb3 bằng thông tin của bạn.Database Access section and create a username and password, as well as the Network Access tab to ensure your IP is allowed to connect to the database. However but if you already have a database user and network access enabled, you'll just need to replace the --example with-mongodb2 and --example with-mongodb3 fields with your information.

Đối với --example with-mongodb4, chúng tôi sẽ tải các bộ dữ liệu mẫu MongoDB Atlas và sử dụng một trong những cơ sở dữ liệu đó. Để tải các bộ dữ liệu mẫu, trong bảng điều khiển Atlas MongoDB của bạn dưới cụm đã chọn của bạn, nhấp vào nút --example with-mongodb5 và nhấn tùy chọn tập dữ liệu mẫu tải. Điều này sẽ mất vài phút để tải dữ liệu và tạo các cơ sở dữ liệu khác nhau. Cái mà chúng tôi sẽ sử dụng cho hướng dẫn này được gọi là --example with-mongodb6, vì vậy bạn sẽ đặt giá trị --example with-mongodb4 của mình thành đó.--example with-mongodb4, we'll load the MongoDB Atlas sample datasets and use one of those databases. To load the sample datasets, in your MongoDB Atlas dashboard under your chosen Cluster, click the --example with-mongodb5 button and hit Load Sample Dataset option. This will take a few minutes to load the data and create the various databases. The one we'll use for this tutorial is called --example with-mongodb6, so you'll set your --example with-mongodb4 value to that.

Để đóng phần này, tệp --example with-mongodb0 của chúng tôi sẽ trông như thế này:--example with-mongodb0 file should look like this:

Để đảm bảo cấu hình của chúng tôi là chính xác, hãy khởi động lại ứng dụng tiếp theo của chúng tôi bằng cách truy cập thiết bị đầu cuối và xây dựng ứng dụng một lần nữa. Thực hiện lệnh sau trong thiết bị đầu cuối của bạn:

Khi ứng dụng được xây dựng, điều hướng đến localhost:3000 trong trình duyệt của bạn và bạn sẽ thấy những điều sau đây:localhost:3000 in your browser and you should see the following:

Đây là trang chào mừng ứng dụng create-next-app0 Next.js. Nếu bạn thấy tin nhắn "Bạn được kết nối với MongoDB", bạn sẽ tốt. Nếu bạn thấy thông báo "Bạn không được kết nối với MongoDB", thì hãy xác minh chuỗi kết nối của bạn và đảm bảo rằng người dùng cơ sở dữ liệu cũng như kết nối mạng được đặt đúng. Nếu bạn gặp phải bất kỳ vấn đề nào, hãy đến với cộng đồng MongoDB và chúng tôi sẽ giúp khắc phục sự cố.create-next-app0 Next.js app welcome page. If you see the message "You are connected to MongoDB", you are good to go. If you see the message "You are NOT connected to MongoDB", then verify your connection string and make sure that the database user as well as network connection is properly set. If you run into any issues, head over to the MongoDB community, and we'll help troubleshoot.

Truy vấn MongoDB với Next.js

Bây giờ chúng tôi đã kết nối với MongoDB, hãy thảo luận về cách chúng tôi có thể truy vấn dữ liệu MongoDB của mình và đưa nó vào ứng dụng.js tiếp theo của chúng tôi. Tiếp theo.js hỗ trợ nhiều cách khác nhau để lấy dữ liệu. Chúng tôi có thể tạo các điểm cuối API, lấy dữ liệu bằng cách chạy các chức năng hiển thị phía máy chủ cho một trang cụ thể hoặc thậm chí tạo các trang tĩnh bằng cách lấy dữ liệu của chúng tôi vào thời gian xây dựng. Chúng tôi sẽ xem xét cả ba ví dụ.API endpoints, get data by running server-side rendered functions for a particular page, or even generate static pages by getting our data at build-time. We'll look at all three examples.

Ví dụ 1: Điểm cuối API tiếp theo.

Ví dụ đầu tiên chúng tôi sẽ xem xét là xây dựng và hiển thị điểm cuối API trong ứng dụng tiếp theo của chúng tôi. Để tạo tuyến đường cuối API mới, trước tiên, chúng tôi sẽ cần tạo thư mục create-next-app1 trong thư mục create-next-app2 của chúng tôi và sau đó mọi tệp chúng tôi tạo trong thư mục create-next-app1 này sẽ được coi là điểm cuối API riêng lẻ.create-next-app1 directory in our create-next-app2 directory, and then every file we create in this create-next-app1 directory will be treated as an individual API endpoint.

Chúng ta hãy tiếp tục và tạo thư mục create-next-app1 và một tệp mới trong create-next-app5 này được gọi là create-next-app6. Điểm cuối này sẽ trả về danh sách 20 bộ phim từ cơ sở dữ liệu MongoDB của chúng tôi. Việc thực hiện cho tuyến đường này như sau:create-next-app1 directory and a new file in this create-next-app5 called create-next-app6. This endpoint will return a list of 20 movies from our MongoDB database. The implementation for this route is as follows:

Để giải thích những gì đang diễn ra ở đây, chúng tôi sẽ bắt đầu với tuyên bố nhập khẩu. Chúng tôi đang nhập phương thức create-next-app7 của chúng tôi từ tệp create-next-app8. Tệp này chứa tất cả các hướng dẫn về cách kết nối với cụm Atlas MongoDB của chúng tôi. Ngoài ra, trong tệp này, chúng tôi lưu trữ phiên bản kết nối của chúng tôi để các yêu cầu tiếp theo không phải kết nối lại với cụm. Họ có thể sử dụng kết nối hiện có. Tất cả điều này được xử lý cho bạn!create-next-app7 method from the create-next-app8 file. This file contains all the instructions on how to connect to our MongoDB Atlas cluster. Additionally, within this file we cache the instance of our connection so that subsequent requests do not have to reconnect to the cluster. They can use the existing connection. All of this is handled for you!

Tiếp theo, trình xử lý tuyến API của chúng tôi có chữ ký là create-next-app9. Nếu bạn quen thuộc với Express.js, điều này sẽ trông rất quen thuộc. Đây là chức năng được thực thi khi tuyến đường mflix0 được gọi. Chúng tôi nắm bắt yêu cầu thông qua mflix1 và trả về phản hồi thông qua đối tượng mflix2.create-next-app9. If you're familiar with Express.js, this should look very familiar. This is the function that gets executed when the mflix0 route is called. We capture the request via mflix1 and return the response via the mflix2 object.

Việc triển khai chức năng xử lý của chúng tôi gọi hàm create-next-app7 để có được thể hiện cơ sở dữ liệu MongoDB của chúng tôi. Tiếp theo, chúng tôi thực hiện một truy vấn MongoDB bằng trình điều khiển MongoDB Node.js để đưa 20 bộ phim hàng đầu ra khỏi bộ sưu tập phim của chúng tôi dựa trên xếp hạng metacritic của họ được sắp xếp theo thứ tự giảm dần.create-next-app7 function to get the instance of our MongoDB database. Next, we execute a MongoDB query using the MongoDB Node.js Driver to get the top 20 movies out of our movies collection based on their metacritic rating sorted in descending order.

Cuối cùng, chúng tôi gọi phương thức mflix4 và vượt qua trong mảng phim của chúng tôi. Điều này phục vụ các bộ phim của chúng tôi ở định dạng JSON cho trình duyệt của chúng tôi. Nếu chúng ta điều hướng đến mflix0, chúng ta sẽ thấy kết quả trông như thế này:mflix4 method and pass in our array of movies. This serves our movies in JSON format to our browser. If we navigate to mflix0, we'll see a result that looks like this:

Chúng tôi có thể thêm các tuyến API bổ sung bằng cách tạo các tệp bổ sung trong thư mục create-next-app1. Là một bài tập bài tập về nhà, tại sao bạn không tạo một tuyến API trả về một bộ phim duy nhất dựa trên ID người dùng được cung cấp?create-next-app1 directory. As a homework exercise, why don't you create an API route that returns a single movie based on a user provided id?

Để cung cấp cho bạn một số gợi ý, bạn sẽ sử dụng các tuyến API động tiếp theo để nắm bắt mflix7. Vì vậy, nếu người dùng gọi mflix8, bộ phim nên được trả lại là bảy samurai. Một mẹo khác, thuộc tính mflix9 cho cơ sở dữ liệu --example with-mongodb6 trong MongoDB được lưu trữ dưới dạng ObjectID, vì vậy bạn sẽ phải chuyển đổi chuỗi thành một ObjectID. Nếu bạn bị mắc kẹt, hãy tạo một chủ đề trên các diễn đàn cộng đồng MongoDB và chúng tôi sẽ giải quyết nó cùng nhau! Tiếp theo, chúng tôi sẽ xem xét cách truy cập dữ liệu MongoDB của chúng tôi trong các trang tiếp theo của chúng tôi.Next.js Dynamic API Routes to capture the mflix7. So if a user calls mflix8 the movie that should be returned is Seven Samurai. Another tip, the mflix9 property for the --example with-mongodb6 database in MongoDB is stored as an ObjectID, so you'll have to convert the string to an ObjectID. If you get stuck, create a thread on the MongoDB Community forums and we'll solve it together! Next, we'll take a look at how to access our MongoDB data within our Next.js pages.

Ví dụ 2: Next.js trang với MongoDB

Trong phần cuối cùng, chúng tôi đã thấy làm thế nào chúng ta có thể tạo điểm cuối API và kết nối với MongoDB với nó. Trong phần này, chúng tôi sẽ đưa dữ liệu của chúng tôi trực tiếp vào các trang tiếp theo của chúng tôi. Chúng tôi sẽ thực hiện việc này bằng cách sử dụng phương thức GetSerVersidProps () có sẵn cho các trang Next.js.getServerSideProps() method that is available to Next.js pages.

Phương thức node-tar extract()1 buộc trang tiếp theo để tải với kết xuất phía máy chủ. Điều này có nghĩa là mỗi khi trang này được tải, phương thức node-tar extract()1 chạy trên phần phụ trợ, lấy dữ liệu và gửi nó vào thành phần React thông qua đạo cụ. Mã trong node-tar extract()1 không bao giờ được gửi đến máy khách. Điều này làm cho nó trở thành một nơi tuyệt vời để thực hiện các truy vấn MongoDB của chúng tôi.node-tar extract()1 method forces a Next.js page to load with server-side rendering. What this means is that every time this page is loaded, the node-tar extract()1 method runs on the backend, gets data, and sends it into the React component via props. The code within node-tar extract()1 is never sent to the client. This makes it a great place to implement our MongoDB queries.

Hãy xem cách thức hoạt động trong thực tế. Hãy tạo một tệp mới trong thư mục create-next-app2 và chúng tôi sẽ gọi nó là create-next-app6. Trong tệp này, chúng tôi sẽ thêm mã sau:create-next-app2 directory, and we'll call it create-next-app6. In this file, we'll add the following code:

Như bạn có thể thấy từ ví dụ trên, chúng tôi đang nhập cùng một lớp tiện ích create-next-app7 và truy vấn MongoDB của chúng tôi hoàn toàn giống nhau trong phương thức node-tar extract()1. Điều duy nhất chúng tôi thực sự cần thay đổi trong việc thực hiện của chúng tôi là cách chúng tôi phân tích phản hồi. Phương pháp trả lại node-tar extract()1 có một số khó khăn trong việc tuần tự hóa dữ liệu của chúng tôi. Có một vấn đề GitHub mở để giải quyết vấn đề này, nhưng cách giải quyết hiện tại là xâu chuỗi và sau đó phân tích dữ liệu theo cách thủ công.create-next-app7 utility class, and our MongoDB query is exactly the same within the node-tar extract()1 method. The only thing we really needed to change in our implementation is how we parse the response. The node-tar extract()1 return method has some trouble serializing our data. There is a GitHub issue open to address this, but the current workaround is to stringify and then parse the data manually.

Thành phần trang của chúng tôi được gọi là node-tar extract()9 Nhận các đạo cụ từ phương thức node-tar extract()1 của chúng tôi và chúng tôi sử dụng dữ liệu đó để hiển thị trang hiển thị tiêu đề phim hàng đầu, xếp hạng metacritic và cốt truyện. Kết quả của bạn sẽ trông giống như thế này:node-tar extract()9 gets the props from our node-tar extract()1 method, and we use that data to render the page showing the top movie title, metacritic rating, and plot. Your result should look something like this:

Điều đó thật tuyệt. Chúng tôi có thể truy vấn trực tiếp cơ sở dữ liệu MongoDB của mình và nhận tất cả dữ liệu chúng tôi cần cho một trang cụ thể. Nội dung của phương thức node-tar extract()1 không bao giờ được gửi đến máy khách, nhưng một nhược điểm của điều này là phương thức này chạy mỗi khi chúng tôi gọi trang. Dữ liệu của chúng tôi khá tĩnh và không có khả năng thay đổi tất cả những điều đó thường xuyên. Điều gì sẽ xảy ra nếu chúng ta kết xuất trước trang này và không phải gọi MongoDB trên mỗi lần làm mới? Chúng ta sẽ xem xét điều đó tiếp theo!node-tar extract()1 method are never sent to the client, but the one downside to this is that this method runs every time we call the page. Our data is pretty static and unlikely to change all that often. What if we pre-rendered this page and didn't have to call MongoDB on every refresh? We'll take a look at that next!

Ví dụ 3: Next.js thế hệ tĩnh với MongoDB

Đối với ví dụ cuối cùng của chúng tôi, chúng tôi sẽ xem cách tạo trang tĩnh có thể hoạt động với MongoDB. Hãy tạo một tệp mới trong thư mục create-next-app2 và gọi nó là node version < 183. Đối với trang này, những gì chúng tôi sẽ muốn làm là hiển thị 1000 bộ phim hàng đầu từ cơ sở dữ liệu MongoDB của chúng tôi.create-next-app2 directory and call it node version < 183. For this page, what we'll want to do is render the top 1000 movies from our MongoDB database.

Top 1000 bộ phim? Bạn mất trí rồi à? Điều đó sẽ mất một lúc và chuyến đi khứ hồi cơ sở dữ liệu không đáng. Chà, nếu chúng ta chỉ gọi phương thức này một lần khi chúng ta xây dựng ứng dụng, để ngay cả khi cuộc gọi đó mất vài giây, điều đó sẽ chỉ xảy ra một lần và người dùng của chúng ta sẽ không bị ảnh hưởng. Họ sẽ nhận được 1000 bộ phim hàng đầu được phân phối nhanh hơn hoặc thậm chí nhanh hơn 20 bộ phim sử dụng node version < 184. Phép thuật nằm trong phương pháp node version < 185 và việc triển khai của chúng tôi trông như thế này:node version < 184. The magic lies in the node version < 185 method, and our implementation looks like this:

Trong nháy mắt, nó trông rất giống với tệp create-next-app6 mà chúng tôi đã tạo trước đó. Những thay đổi đáng kể duy nhất chúng tôi thực hiện là thay đổi node version < 187 của chúng tôi từ node version < 188 thành node version < 189 và phương pháp node-tar extract()1 của chúng tôi thành node version < 185. Nếu chúng tôi điều hướng đến Y2 trong trình duyệt của chúng tôi, chúng tôi sẽ thấy một danh sách dài các bộ phim.create-next-app6 file we created earlier. The only significant changes we made were changing our node version < 187 from node version < 188 to node version < 189 and our node-tar extract()1 method to node version < 185. If we navigate to Y2 in our browser, we'll see a long list of movies.

Hãy nhìn xem Scrollbar nhỏ bé đó là như thế nào. Tải trang này mất khoảng 3,5 giây trên máy của tôi trái ngược với thời gian phản hồi 8,79 giây cho trang Y3. Lý do mất nhiều thời gian này là vì trong chế độ phát triển, phương pháp node version < 185 được gọi mỗi lần (giống như phương pháp node-tar extract()1). Nhưng nếu chúng ta chuyển từ chế độ phát triển sang chế độ sản xuất, chúng ta sẽ thấy điều ngược lại. Trang Y6 sẽ được kết xuất trước và sẽ tải gần như ngay lập tức, trong khi các tuyến Y3 và Y8 sẽ thực thi mã phía máy chủ mỗi lần.Y3 page. The reason it takes this long is because in development mode the node version < 185 method is called every single time (just like the node-tar extract()1 method). But if we switch from development mode to production mode, we'll see the opposite. The Y6 page will be pre-rendered and will load almost immediately, while the Y3 and Y8 routes will execute the server-side code each time.

Hãy chuyển sang chế độ sản xuất. Trong cửa sổ thiết bị đầu cuối của bạn, hãy dừng ứng dụng hiện tại đang chạy. Để chạy ứng dụng tiếp theo của chúng tôi trong chế độ sản xuất, trước tiên chúng tôi sẽ cần xây dựng nó, sau đó chúng tôi có thể chạy lệnh Y9 sẽ phục vụ ứng dụng được xây dựng của chúng tôi. Trong cửa sổ đầu cuối của bạn thực thi các lệnh sau:Y9 command which will serve our built application. In your terminal window execute the following commands:

Khi bạn chạy lệnh mflix0, ứng dụng tiếp theo của bạn sẽ được phục vụ trong chế độ sản xuất. Phương pháp node version < 185 sẽ không được thực thi mỗi khi bạn đạt tuyến đường Y6 vì trang này bây giờ sẽ được phục vụ tĩnh. Chúng ta thậm chí có thể xem trang tĩnh được hiển thị sẵn bằng cách điều hướng đến tệp mflix3 và xem 1.000 bộ phim được liệt kê trong HTML đơn giản.mflix0 command, your Next.js app is served in production mode. The node version < 185 method will not be executed every time you hit the Y6 route as this page will now be served statically. We can even see the pre-rendered static page by navigating to the mflix3 file and seeing the 1,000 movies listed in plain HTML.

Tiếp theo.js thậm chí có thể cập nhật nội dung tĩnh này mà không yêu cầu xây dựng lại với một tính năng gọi là tái tạo tĩnh gia tăng, nhưng đó là ngoài phạm vi của hướng dẫn này. Tiếp theo, chúng tôi sẽ xem xét việc triển khai ứng dụng của chúng tôi trên Vercel.Incremental Static Regeneration, but that's outside of the scope of this tutorial. Next, we'll take a look at deploying our application on Vercel.

Triển khai ứng dụng tiếp theo của bạn.

Bước cuối cùng trong hướng dẫn của chúng tôi ngày hôm nay là triển khai ứng dụng của chúng tôi. Chúng tôi sẽ triển khai tiếp theo.js của chúng tôi với ứng dụng MongoDB cho Vercel. Tôi đã tạo ra một repo github chứa tất cả các mã chúng tôi đã viết ngày hôm nay. Hãy thoải mái sao chép nó, hoặc tạo ra của riêng bạn.GitHub repo that contains all of the code we have written today. Feel free to clone it, or create your own.

Điều hướng đến Vercel và đăng nhập. Một khi bạn đang ở trên bảng điều khiển của mình, nhấp vào nút Nhập dự án, sau đó nhập Kho lưu trữ Git.Vercel and log in. Once you are on your dashboard, click the Import Project button, and then Import Git Repository.

URL tôi sẽ sử dụng là loại được cung cấp ở trên có ứng dụng chúng tôi đã xây dựng ngày hôm nay. Để tham khảo rằng URL là mflix4. Thêm dự án của bạn URL và nhấn tiếp tục. Trên màn hình tiếp theo, bạn sẽ có tùy chọn thêm các biến môi trường và ở đây chúng tôi sẽ muốn thêm hai biến từ tệp ____10 của chúng tôi. Các biến sẽ là --example with-mongodb1. Hãy chắc chắn để thêm cả hai với các giá trị tương ứng của chúng trước khi nhấn triển khai.mflix4. Add your projects GitHub URL and hit Continue. On the next screen, you'll have the option to add Environment Variables and here we'll want to add the two variables from our --example with-mongodb0 file. The variables will be --example with-mongodb1. Be sure to add both of these with their corresponding values before hitting Deploy.

Sau khi nhấn nút triển khai ứng dụng tiếp theo của bạn. Ứng dụng sẽ được tự động xây dựng và triển khai. Quá trình này sẽ mất vài phút, nhưng một khi đã hoàn thành, bạn sẽ nhận được một URL nơi bạn có thể truy cập ứng dụng.js tiếp theo của mình. Trong trường hợp của tôi rằng url là.Deploy button your Next.js application will be automatically built and deployed. This process will take a few minutes, but once it's done, you will get a URL where you can access your Next.js application. In my case that URL is .

Lưu ý: Vercel sử dụng địa chỉ IP động, vì vậy bạn sẽ cần thêm một ngoại lệ để truy cập từ bất kỳ địa chỉ IP nào trong bảng điều khiển Atlas MongoDB của bạn. Để thực hiện việc này đơn giản hóa điều hướng đến tab truy cập mạng, nhấn nút Thêm địa chỉ IP, sau đó nhấn nút Cho phép từ bất kỳ nơi nào hoặc cho mục nhập danh sách truy cập Nhập 0.0.0/0.: Vercel uses dynamic IP addresses so you'll need to add an exception to access from any IP address in your MongoDB Atlas dashboard. To do this simplify navigate to the Network Access tab, hit the Add IP Address button, and then hit the Allow Access From Anywhere button or for the Access List Entry enter 0.0.0/0.

Chúng tôi đang sống! Hãy đảm bảo mọi thứ hoạt động bằng cách điều hướng đến các tuyến mflix7, mflix8 và mflix9.mflix7, mflix8, and mflix9 routes.

Tiếp theo.js và MongoDB chỉ bằng một cú nhấp chuột

Ứng dụng của chúng tôi hiện đã được triển khai và chạy trong sản xuất. Nếu bạn không theo dõi cùng với hướng dẫn và chỉ muốn nhanh chóng bắt đầu ứng dụng tiếp theo của mình với MongoDB, bạn luôn có thể sử dụng bộ khởi động với mong muốn được tìm thấy tại GitHub, nhưng tôi đã có một ứng dụng thậm chí còn tốt hơn cho bạn.Github, but I’ve got an even better one for you.

Nhấp vào liên kết này và bạn sẽ tham gia các cuộc đua trong việc tạo và triển khai chính thức Next.js với tích hợp MongoDB và tất cả những gì bạn cần cung cấp là chuỗi kết nối của bạn. and you'll be off to the races in creating and deploying the official Next.js with the MongoDB integration and all you'll need to provide is your connection string.

Để tất cả chúng cùng nhau

Trong hướng dẫn này, chúng tôi đã đi qua chính thức tiếp theo với ví dụ MongoDB. Tôi đã chỉ cho bạn cách kết nối cơ sở dữ liệu MongoDB của bạn với ứng dụng.JS tiếp theo của bạn và thực hiện các truy vấn theo nhiều cách. Sau đó, chúng tôi đã triển khai ứng dụng của chúng tôi bằng Vercel.

Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, hãy liên hệ với các diễn đàn cộng đồng ThemongoDB và cho tôi biết những gì bạn xây dựng với Next.js và MongoDB.MongoDB Community forums and let me know what you build with Next.js and MongoDB.