1 00:00:03,000 --> 00:00:07,163 We set up a new Next.js project using Create Next App, 2 00:00:07,663 --> 00:00:10,200 and added Tailwind CSS for styling. 3 00:00:10,200 --> 00:00:13,318 Now, before we go on and start implementing 4 00:00:13,318 --> 00:00:15,058 the actual functionality 5 00:00:15,058 --> 00:00:18,031 I want to think about how our application 6 00:00:18,031 --> 00:00:20,423 is going to work at a high level. 7 00:00:21,213 --> 00:00:23,821 A good place to start is from the data. 8 00:00:24,321 --> 00:00:26,327 What sort of data will we need 9 00:00:26,327 --> 00:00:28,066 to build our Shop website? 10 00:00:28,632 --> 00:00:30,805 Well, we'll obviously need some "Products". 11 00:00:31,305 --> 00:00:34,293 That's what we want to sell on our website, 12 00:00:34,293 --> 00:00:37,280 so we'll need the details of every product, 13 00:00:37,280 --> 00:00:40,544 like their name, description, price, and so on. 14 00:00:40,544 --> 00:00:43,323 After that, if we want to sell a product 15 00:00:43,323 --> 00:00:45,199 we need somebody to buy it, 16 00:00:45,976 --> 00:00:48,602 and that somebody will be our "Users", 17 00:00:48,602 --> 00:00:49,500 or customers. 18 00:00:50,069 --> 00:00:52,574 We'll need to save some user details 19 00:00:52,574 --> 00:00:55,705 in order to let people log in to our website, 20 00:00:55,705 --> 00:00:59,044 know where to deliver their purchase, and so on. 21 00:00:59,044 --> 00:01:02,662 Also, when a user selects a product they want to buy 22 00:01:03,370 --> 00:01:06,546 we probably want to save that in a "Shopping Cart". 23 00:01:07,046 --> 00:01:09,724 So that's another piece of information 24 00:01:09,724 --> 00:01:11,697 required by our application, 25 00:01:11,697 --> 00:01:14,515 and it's related to the other two items, 26 00:01:14,515 --> 00:01:17,475 because a Shopping Cart basically contains 27 00:01:17,475 --> 00:01:19,447 Products selected by a User. 28 00:01:19,447 --> 00:01:21,843 This means that whatever mechanism 29 00:01:21,843 --> 00:01:23,957 we choose for storing our data 30 00:01:23,957 --> 00:01:26,000 should make it easy to manage 31 00:01:26,000 --> 00:01:27,409 these relationships. 32 00:01:27,409 --> 00:01:30,369 There are other types of data we may want, 33 00:01:30,369 --> 00:01:32,060 like orders and payments 34 00:01:32,060 --> 00:01:34,173 but for this example let's say 35 00:01:34,173 --> 00:01:37,133 we don't need to worry about those things. 36 00:01:37,133 --> 00:01:39,810 Let's assume that we'll integrate with 37 00:01:39,810 --> 00:01:41,572 some third party platform 38 00:01:41,572 --> 00:01:43,404 that will take care of all 39 00:01:43,404 --> 00:01:45,940 the order and payment functionality. 40 00:01:47,567 --> 00:01:51,179 Now, having identified what kind of data we need 41 00:01:51,679 --> 00:01:54,778 let's think about where we can store it. 42 00:01:54,778 --> 00:01:58,421 We already used some data in our first example, 43 00:01:58,421 --> 00:02:00,281 that was a Blog website. 44 00:02:00,936 --> 00:02:04,758 In that case we used a simple architecture like this: 45 00:02:04,758 --> 00:02:08,002 the data was stored in the local file system, 46 00:02:08,002 --> 00:02:10,095 in the form of Markdown files 47 00:02:10,095 --> 00:02:11,970 containing each blog post, 48 00:02:11,970 --> 00:02:14,855 and our Next.js app was loading the data 49 00:02:14,855 --> 00:02:17,019 simply by reading those files. 50 00:02:17,019 --> 00:02:19,182 Could we use the same approach 51 00:02:19,182 --> 00:02:20,985 for our Shop application? 52 00:02:20,985 --> 00:02:22,933 You can probably guess that 53 00:02:22,933 --> 00:02:25,890 this architecture is a bit too simplistic 54 00:02:25,890 --> 00:02:27,260 for an online Shop. 55 00:02:27,260 --> 00:02:29,640 If we need to modify a local file 56 00:02:29,640 --> 00:02:32,958 every time a new user registers to our website 57 00:02:32,958 --> 00:02:36,059 or they add an item to their shopping cart, 58 00:02:36,059 --> 00:02:37,790 that just doesn't scale. 59 00:02:39,300 --> 00:02:41,114 So instead of the file system 60 00:02:41,114 --> 00:02:42,615 we could use a database. 61 00:02:43,177 --> 00:02:45,893 This could be a relational database, 62 00:02:45,893 --> 00:02:47,703 like MySQL or PostgreSQL 63 00:02:47,703 --> 00:02:51,398 or maybe a so-called NoSQL database like MongoDB. 64 00:02:51,398 --> 00:02:53,736 But in any case, there are many 65 00:02:53,736 --> 00:02:56,300 solid scalable databases available 66 00:02:56,300 --> 00:02:59,091 that are designed precisely to handle 67 00:02:59,091 --> 00:03:00,675 large amounts of data 68 00:03:00,675 --> 00:03:04,596 and also enforce the relationships between the data, 69 00:03:04,596 --> 00:03:07,236 like make sure that a shopping cart 70 00:03:07,236 --> 00:03:09,197 belongs to a certain user. 71 00:03:09,197 --> 00:03:11,535 So this is a possible approach, 72 00:03:11,535 --> 00:03:15,381 we could have our Next.js app connect to a database 73 00:03:15,381 --> 00:03:17,945 using whatever protocol and driver 74 00:03:17,945 --> 00:03:21,641 is available for the specific database we choose. 75 00:03:21,641 --> 00:03:24,658 Now, this may work fine in simple cases, 76 00:03:24,658 --> 00:03:27,524 but rather than having the Next.js app 77 00:03:27,524 --> 00:03:29,711 talk directly to the database 78 00:03:31,418 --> 00:03:33,625 we may want to introduce a middle tier, 79 00:03:34,125 --> 00:03:35,351 a backend application 80 00:03:35,351 --> 00:03:38,095 that is responsible for talking to the database 81 00:03:38,653 --> 00:03:42,186 and exposing the data as a Web API, 82 00:03:42,186 --> 00:03:43,801 like a REST API. 83 00:03:44,401 --> 00:03:47,371 This way our Next.js app can interact 84 00:03:47,371 --> 00:03:49,538 only with this backend API, 85 00:03:49,538 --> 00:03:52,266 typically by making HTTP requests. 86 00:03:52,266 --> 00:03:55,235 The Next.js app is just the frontend; 87 00:03:55,235 --> 00:03:57,161 it doesn't need to worry 88 00:03:57,161 --> 00:04:00,612 about what database is used by the backend. 89 00:04:00,612 --> 00:04:04,143 All it needs to know is how to call the API. 90 00:04:04,143 --> 00:04:07,193 The advantage of this approach is that 91 00:04:07,193 --> 00:04:10,082 this way the Backend API can be used 92 00:04:10,082 --> 00:04:12,248 not just by our Next.js app 93 00:04:12,248 --> 00:04:15,298 but possibly by other clients as well. 94 00:04:16,600 --> 00:04:18,322 For example at some point 95 00:04:18,322 --> 00:04:20,661 we may want to provide mobile apps 96 00:04:20,661 --> 00:04:23,141 so our users can easily shop with us 97 00:04:23,141 --> 00:04:24,449 using their phones. 98 00:04:25,156 --> 00:04:27,725 And those mobile apps could call 99 00:04:27,725 --> 00:04:31,258 the same Backend API as our Next.js web app. 100 00:04:31,838 --> 00:04:35,083 Even if we don't have other frontends to begin with 101 00:04:35,083 --> 00:04:38,328 it may still be worth keeping the backend separate. 102 00:04:38,891 --> 00:04:42,069 Now, we could write this backend application, 103 00:04:42,069 --> 00:04:44,753 for example using Node.js and Express, 104 00:04:44,753 --> 00:04:48,425 or any other framework or language for that matters, 105 00:04:48,425 --> 00:04:50,402 But there are also solutions 106 00:04:50,402 --> 00:04:53,933 that can give us a backend API with little effort. 107 00:04:54,716 --> 00:04:58,062 In particular, we could use a "Headless CMS". 108 00:04:58,062 --> 00:05:01,259 CMS stands for "Content Management System", 109 00:05:01,834 --> 00:05:03,879 and "headless" means we can use it 110 00:05:03,879 --> 00:05:05,684 without a graphical interface. 111 00:05:06,245 --> 00:05:10,004 In other words, a headless CMS provides a web API 112 00:05:10,004 --> 00:05:12,920 that we can call from our Next.js app. 113 00:05:13,497 --> 00:05:17,209 An API that returns the content stored in the CMS, 114 00:05:17,709 --> 00:05:20,600 so that we can then display it on our frontend. 115 00:05:21,100 --> 00:05:24,978 But a CMS typically also provides an "Admin UI", 116 00:05:25,478 --> 00:05:28,228 a user interface where administrators 117 00:05:28,228 --> 00:05:29,937 can manage the content. 118 00:05:29,937 --> 00:05:33,503 For example for our shop, they could use this UI 119 00:05:33,503 --> 00:05:36,401 to add and update the product details. 120 00:05:37,123 --> 00:05:39,677 This means that in our Next.js app 121 00:05:39,677 --> 00:05:42,530 we just need to provide a "Public UI", 122 00:05:43,105 --> 00:05:46,315 that is the website visible to end customers. 123 00:05:46,315 --> 00:05:49,810 We don't need to worry about writing an interface 124 00:05:49,810 --> 00:05:53,520 to let the shop staff add new products and the like, 125 00:05:53,520 --> 00:05:55,660 they can use the CMS for that. 126 00:05:56,374 --> 00:05:59,385 So, this is the approach we're going to take 127 00:05:59,385 --> 00:06:00,617 for our Next Shop. 128 00:06:01,186 --> 00:06:03,484 I'm not going to claim that this 129 00:06:03,484 --> 00:06:06,213 is always the best approach of course. 130 00:06:06,213 --> 00:06:09,014 For any project you need to think about 131 00:06:09,014 --> 00:06:10,881 the specific requirements, 132 00:06:10,881 --> 00:06:12,892 and choose the best solution 133 00:06:12,892 --> 00:06:15,191 for that particular application. 134 00:06:15,191 --> 00:06:17,920 But I would say that this architecture 135 00:06:17,920 --> 00:06:19,572 based on a Headless CMS 136 00:06:19,572 --> 00:06:22,301 is a pretty good choice in many cases, 137 00:06:22,301 --> 00:06:25,749 and in fact it has grown in popularity recently. 138 00:06:25,749 --> 00:06:28,693 Ok. So we're going to use a headless CMS. 139 00:06:29,912 --> 00:06:32,453 Now, the question is: which one exactly? 140 00:06:32,953 --> 00:06:34,670 Next.js provides examples 141 00:06:34,670 --> 00:06:37,831 for many different Content Management Systems. 142 00:06:38,400 --> 00:06:42,015 DatoCMS, TakeShape, Sanity, Prismic, and so on. 143 00:06:42,015 --> 00:06:44,246 These are all headless CMSes. 144 00:06:44,246 --> 00:06:47,477 There more than a dozen just on this page, 145 00:06:47,477 --> 00:06:51,170 and probably some more that are not listed here. 146 00:06:51,901 --> 00:06:54,526 Now, most of these are hosted solutions, 147 00:06:55,026 --> 00:06:58,329 where you sign up online, and all your data 148 00:06:58,329 --> 00:07:00,096 is stored in the cloud. 149 00:07:00,673 --> 00:07:02,564 You can do a little bit of research 150 00:07:02,564 --> 00:07:05,265 if you want to choose a CMS for your own projects. 151 00:07:05,819 --> 00:07:09,229 But the one we're going to use for our Shop example 152 00:07:09,229 --> 00:07:09,898 is Strapi. 153 00:07:10,464 --> 00:07:12,351 I selected this one because 154 00:07:12,351 --> 00:07:14,307 it's an open source project. 155 00:07:14,307 --> 00:07:16,472 It's not a proprietary solution 156 00:07:16,472 --> 00:07:19,406 hosted in the cloud like most other CMSes. 157 00:07:19,406 --> 00:07:21,013 You can download Strapi 158 00:07:21,013 --> 00:07:24,016 and run it on your own machine if you like. 159 00:07:24,016 --> 00:07:26,531 We'll look at Strapi in more details 160 00:07:26,531 --> 00:07:27,789 in the next video.