1 00:00:03,000 --> 00:00:05,099 After rewriting "getSlugs", 2 00:00:05,099 --> 00:00:07,557 all these functions are now fetching 3 00:00:07,557 --> 00:00:09,058 the data from the CMS. 4 00:00:09,127 --> 00:00:11,382 Note how we only had to change 5 00:00:11,382 --> 00:00:13,037 the code in this file. 6 00:00:13,112 --> 00:00:16,494 We didn't modify anything in the page components, 7 00:00:16,494 --> 00:00:18,945 other some temporary log statements 8 00:00:18,945 --> 00:00:19,995 here and there. 9 00:00:20,065 --> 00:00:21,897 But the way we display the 10 00:00:21,897 --> 00:00:23,659 data is exactly the same. 11 00:00:23,729 --> 00:00:26,789 We only changed how we load the data: 12 00:00:26,789 --> 00:00:29,604 by sending HTTP requests to Strapi, 13 00:00:29,604 --> 00:00:32,119 rather than reading Markdown files. 14 00:00:32,119 --> 00:00:34,152 By the way, we can delete this 15 00:00:34,152 --> 00:00:35,573 "content" folder now. 16 00:00:36,020 --> 00:00:38,540 The fact that we could migrate 17 00:00:38,540 --> 00:00:40,640 from local files to a CMS 18 00:00:40,724 --> 00:00:43,064 without modifying any of the pages 19 00:00:43,064 --> 00:00:45,387 shows why it's a good practice 20 00:00:45,387 --> 00:00:47,502 to keep the data fetching logic 21 00:00:47,502 --> 00:00:49,481 separate from the components. 22 00:00:49,549 --> 00:00:52,051 Anyway, what I'd like to do now is 23 00:00:52,051 --> 00:00:54,332 run our app in production mode, 24 00:00:54,406 --> 00:00:57,724 and see how that works, with the data in a CMS. 25 00:00:57,724 --> 00:01:00,776 Note that Next.js is still configured 26 00:01:00,776 --> 00:01:02,591 to do a Static Export. 27 00:01:02,673 --> 00:01:05,202 In the Terminal, we already did a production 28 00:01:05,202 --> 00:01:06,811 build in the previous video, 29 00:01:06,868 --> 00:01:09,688 but let's do another "npm run build". 30 00:01:10,408 --> 00:01:13,172 All our pages are statically generated, 31 00:01:13,172 --> 00:01:15,306 including the dynamic route, 32 00:01:15,306 --> 00:01:19,075 so we can still do a Static Export of our website, 33 00:01:19,075 --> 00:01:21,956 even though we keep the data in the CMS. 34 00:01:21,956 --> 00:01:23,896 All the review data will be 35 00:01:23,896 --> 00:01:25,693 fetched during the build. 36 00:01:25,765 --> 00:01:28,627 We can test the static website locally 37 00:01:28,627 --> 00:01:30,662 by running the "serve" command 38 00:01:30,922 --> 00:01:32,941 with "out", that's the folder 39 00:01:32,941 --> 00:01:34,961 containing the static export. 40 00:01:35,031 --> 00:01:37,040 Let's go and reload the application 41 00:01:37,040 --> 00:01:37,901 in the browser, 42 00:01:37,959 --> 00:01:40,161 making sure it doesn't use the cache. 43 00:01:40,537 --> 00:01:42,981 You can see that everything still works, 44 00:01:42,981 --> 00:01:45,687 even as a fully static website. 45 00:01:45,687 --> 00:01:47,804 All the content for each review 46 00:01:47,804 --> 00:01:50,389 has been incorporated into the HTML 47 00:01:50,389 --> 00:01:52,678 for each page during the build. 48 00:01:52,752 --> 00:01:55,372 So, when running the static website 49 00:01:55,372 --> 00:01:58,932 we don't actually need access to the Strapi API. 50 00:01:58,932 --> 00:02:01,283 All the data has already been 51 00:02:01,283 --> 00:02:03,067 fetched at build time. 52 00:02:03,148 --> 00:02:06,547 There is one caveat though: if we inspect an image 53 00:02:06,547 --> 00:02:08,739 we'll see that the browser loads 54 00:02:08,739 --> 00:02:10,451 it directly from the CMS. 55 00:02:10,520 --> 00:02:14,417 The URL is "localhost" on port 1337, 56 00:02:14,417 --> 00:02:16,947 that, as we know, is the Strapi address. 57 00:02:16,947 --> 00:02:19,510 So, if we wanted to actually deploy 58 00:02:19,510 --> 00:02:21,487 this website to production, 59 00:02:21,561 --> 00:02:23,407 we'll first need a Strapi 60 00:02:23,407 --> 00:02:25,254 server with a public URL, 61 00:02:25,328 --> 00:02:27,570 and use that public address for 62 00:02:27,570 --> 00:02:29,595 all the images in our pages. 63 00:02:29,667 --> 00:02:31,844 In the next section we'll talk 64 00:02:31,844 --> 00:02:33,659 about Image Optimization, 65 00:02:33,731 --> 00:02:36,255 and see how we can get Next.js 66 00:02:36,255 --> 00:02:39,666 to automatically convert and resize our images.