Setting Up Next.js 13 & Supabase: Blogging App Series - Part 1 | Reactjs Tutorial
Setting Up Next.js 13 & Supabase: Blogging App Series - Part 1 | Reactjs Tutorial
Welcome to the first episode of our comprehensive guide on building a blogging application using Next.js 13 and Supabase. In this kick-off tutorial, we delve into the initial setup of Next.js 13 and Supabase, marking the beginning of our journey towards creating a robust blogging app.
Throughout this video, we’ll walk you through the installation process and show you how to seamlessly integrate Supabase with Next.js 13. Not just that, we also explore the nuances of fetching data with Next.js server components, a critical skill for any modern web developer.
This video serves as the foundation for our upcoming series, where we will progressively build on this setup and unlock the full potential of Next.js and Supabase in web development. Whether you’re an aspiring developer or a seasoned professional looking to expand your toolkit, this series is designed to equip you with the practical knowledge and experience to build your own blogging app.
Stay tuned for more videos in this series where we’ll further explore the power and flexibility of Next.js and Supabase. Don’t forget to hit the like button if you found this video helpful and subscribe to our channel to stay updated on our upcoming tutorials.
Timestamps:
0:00 - Introduction
1:00 - Supabase overview
4:00 - Next.js 13 Project setup
8:37 - Next.js 13 app directory features and routing
14:12 - Nextbase Quick peek
15:14 - Integrating Supabase with Next.js 13
20:37 - React server components
22:15 - Data fetching
28:18 - Row level security
29:47- Conclusion \u0026 What’s Next
#Nextjs #Supabase #WebDevelopment #BloggingApp #Tutorial
---
🔧 Things I am working on right now
Checkout my Next.js 13 Supabase boilerplate at usenextbase.com
supertranslate.ai
arni-creative.com
---
Support my channel:
🙏 Donate via PayPal: https://paypal.me/imbhargav5
🙏 Support me on Patreon: https://www.patreon.com/imbhargav5
Thank you!
---
Join my discord community! https://discord.gg/aUnYG52
---
Follow me on:
👉 Twitter: https://twitter.com/codewithbhargav
👉 Linkedin: https://www.linkedin.com/in/codewithb…
👉 Github: https://github.com/imbhargav5
👉 Youtube: / uc4gkwr53xdzybmwm8y61uka
Content
0.659 -> Hey everyone, so welcome back to my channel. I am Bhargav
3.78 -> and this is going to be a new series on Next.js 13 and Superbase.
7.7 -> So Next.js 13 is really new right now. It
11.8 -> has come up with some amazing concepts like server components,
15.339 -> server actions.
19.4 -> It's a huge repository of new tech right now.
22.8 -> They're really innovating very quickly. And the other part
27.38 -> of this course is Superbase, which is a database and authentication
30.46 -> system. It's also so much more than that but that is primarily what
34.44 -> Superbase is. It is a way for you to authenticate your users and
37.36 -> it's a way for you to manage all of your data in it.
41.18 -> So we are going to start building apps with Next.js
45.24 -> 13 and Superbase. We're not just going to be building anything random.
48.6 -> This is going to be something that you do in your day-to-day
53.1 -> job as a software engineer. So we're going to start building
56.36 -> a blogging app and we're going to use Next.js 13 and Superbase.
60.04 -> So the first step is to head over to Superbase and
63.82 -> create a new project. And you can do so by first
68.64 -> creating your account and then you'll have a default organization here
72.18 -> and then within the organization you can click on new project and
74.72 -> then give it a name. So I'm going to just call this blogging app.
79.24 -> And then here you need a strong password.
83.18 -> So for now I'm going to just give a random password.
91.36 -> Okay. And then the free plan is fine for now. And
95.22 -> let's create this project.
99.72 -> Okay, so now this gives, superbase gives you a bunch of variables
102.979 -> here that you can use to start interacting with the database.
107.54 -> So it takes a few minutes to set up the project, but
113.72 -> yeah, so in Next.js, while that is being set up, I'm
117.44 -> just gonna talk quickly about how we are going to be building our app
122.16 -> in Next.js. So Next.js 13
126.04 -> has come up with a new feature called the app router. So earlier
129.28 -> on, what we had was the pages router. So you would create
132.5 -> all of your pages or your routes inside a folder called
136.4 -> pages in your repository. And now there is a new folder
140.66 -> called the app in Next.js. And the way it works is that
145.2 -> the app router has more emphasis on server-side code.
150.04 -> It also has more emphasis on layouts. So by layouts
154.4 -> what I mean is that you can decide how a group of pages
158.64 -> will look or how a group of pages will perform. What kind
162.38 -> of actions need to be run for those group of pages.
165.92 -> So all of this logic can now be put in files called
169.04 -> layouts. So that is how primarily how the app folder
173.1 -> is different from the pages folder. There are many many other differences as well.
176.48 -> But this is just a small introduction to how we'll be building
180.92 -> our apps, right? So we'll be building this blogging app
184.2 -> using Next.js 13's app folder and by using Superbase.
189.28 -> So the repository seems to be set up now, so let's go to the table
192.98 -> editor. So right now, because this repository, this project is new,
196.78 -> we don't have any tables. Let's take a look at the
200.54 -> schema. So there is public, there is auth, and there are a few other schemas
203.86 -> that Superbase has created. We don't care about any of them. We only care
207.62 -> about public and auth. So public is where we'll create our own
211.08 -> unique tables for our project. The other table, the other schema
214.6 -> is the auth. So the auth schema is mainly responsible
220.32 -> for all of the authentication features. So it has a table called users
223.66 -> here. And when a new user signs up, those details will
226.92 -> be stored inside the users table.
230.66 -> So for now, we don't have to do much. Let's just kickstart
234.76 -> a new project
238.58 -> with Next.js and then start linking our super-based project to
241.92 -> it. So let's open the terminal and
247.44 -> Let's see
251.94 -> Okay, I'll just create a new
256.64 -> folder quickly Okay, so I'm going to use yarn create next
260.279 -> app.
263.36 -> And so this is a utility by Next.js and you
267.62 -> can scaffold a new app using this pretty quickly. So I want
270.86 -> this to be a blogging app, the name of the project, and I
274.86 -> want to use TypeScript, and I want to use ESLint, and yes, I also
278.98 -> want to use Tailwind CSS, and yes, I also want the src
282.88 -> folder, and yes, I also want the app router.
286.78 -> Would you like to customize the default? No, I don't want to customize the default
290.06 -> import aliases. I'm fine with the default ones. So no. So
294.14 -> let's see
297.34 -> what happens after this. I haven't done this in a long time, So let's see
301.26 -> how the output will look like.
305.66 -> So also meanwhile, while it is installing, I also want to
308.8 -> make a small note that we'll be using TypeScript pretty heavily with Superbase.
312.34 -> If you're not familiar with TypeScript, don't get intimidated.
314.66 -> It's just typing information that is very useful for you while
318.68 -> you are writing code. Other than that you do not we are not building too
322.12 -> many advanced types in this course ok. So, let me open
325.76 -> this folder using VS code ok.
333.98 -> So, now let us take a look at the directory structure.
337.8 -> So, we have the src folder and we already have an
341 -> app folder now and we have two files here layout and page.
345.86 -> Besides these folders we have a public folder for static
350.28 -> assets and then we have the next JS config. There is nothing
354.34 -> here, pretty much, pretty much empty. Then we have post JS config,
357.72 -> we need this for tailwind.
360.66 -> Okay, and we have a TS config JSON which is pretty standard.
365.62 -> There is nothing to custom about this. It's pretty simple. We just have path
369.02 -> aliases here so that we can import files pretty easily using
373.2 -> this asterisk symbol. Okay, so now let's quickly
378.44 -> run yarn dev. We already have all of our node models installed
384 -> so now yarn dev should be should be good enough. So now let's quickly
387.98 -> open this file in our browser.
394.26 -> There we go So we have a working Nixjs app with us right
397.56 -> now. So now the next step is to, we don't need any of
401.88 -> this. So let's rip out all of this code first. Let's
405.86 -> take a look at what we have first of all. So there's a home file
409.84 -> here.
412.12 -> There's a page.jsx file which has all of this content. So let's
415.94 -> quickly remove some of this.
420.06 -> We don't care about any of this at all. So let's remove this.
423.76 -> Okay, I'm just gonna put in home. And then there's a
429.48 -> file called layout and it imports some styles from global.js and
433.52 -> this is where The font is set and this is using
439.22 -> next slash font, which is another util by Vercel. So, Vercel is pretty much doing
442.36 -> everything right now. It can do fonts, it can also do OG images
445.96 -> for SEO. So many things, so much to learn. We'll cover
449.5 -> all of these gradually. And this metadata is pretty much
454.2 -> SEO information. So, let us change this if you look at
457.84 -> the site there is create next app here right. So, if I change this
461.04 -> to
463.5 -> my blogging app
466.62 -> ok. So, it changes here. So, if you look at the page source,
472.12 -> the metadata is responsible for changing the title attribute this.
476.28 -> And whatever title attribute is set here that is that will be the title
479.34 -> of the document. So, this is a new way of creating your
483.42 -> SEO, your document metadata, and this will directly translate
488.1 -> to metadata tags inside your HTML. We'll discuss this more
491.78 -> in a future video, but for now just understand that
495.04 -> Earlier we used
498.34 -> to have something like this, import head from next
503.04 -> head. This is what we used to have, but that is no longer there.
507.04 -> If you're coming from Nexus 12, this is new information for you.
511.12 -> Anyway, so the root layout has HTML and body, and
516.26 -> I think that's it. So to tell you about the relationship between
520.28 -> these two pages, the layout and page, what happens here
523.86 -> is that this is the root layout of your entire app. So this
527.22 -> file will run for every single page inside your app.
531.26 -> This is the first layout that will be rendered and the children
534.64 -> in this case will be nothing but the page for that
537.74 -> corresponding route. So I'll explain once again.
543.66 -> So the home, the root page.asix file corresponds to
548.72 -> the slash route. Now let us say I want a route
554.44 -> called about. So I will create a new folder called about
559.78 -> and then in this I will create a new page.
564.06 -> This is a convention every if you want a route called about then you have
568.44 -> to create a folder called about and a file called page dot TSX
571.56 -> or JSX depending on whether you are using TypeScript or JavaScript.
574.74 -> And then it should have a default export, which should be a component.
579.1 -> And I'm going to call this about page, and I'm going to return
582.48 -> about, p about, simply a paragraph. Now let me go
587.92 -> to localhost 3000 slash about
610.38 -> ok. I do not know why the What is this? Is it because of the styling somehow?
615.04 -> Hmm.
626.58 -> Okay, I don't know why this looks absurd, but let me just copy this
629.72 -> and put it back. We'll actually move that back to the layout.
632.96 -> Let's change this to about. Okay, there we go. Anyway,
637.64 -> so there is layout 3000. And then this layout. So there is some
640.68 -> tailoring styling, we don't care about that. But so this is the homepage.
644.48 -> And this is the about page. And let's see how layout
648.6 -> works. So in layout, what I'll do is, I'll move this
652.7 -> into main, and let me grab this
659.06 -> and put it in the layout.
663.18 -> Okay, and I'll just put something here. Maybe h1, saying
667.74 -> blogging app. And then in the page.jsx, I'll just remove
672.98 -> this main. Let's change this to a div or a p.
680.8 -> And I'll do the same thing with my root page as well,
684.14 -> a paragraph,
690.46 -> ok.
692.6 -> So now, so now we have this blogging app which is common
695.86 -> for both pages. So, if I go to slash route there is blogging app
699.34 -> and then there is home. So, what essentially is happening here is that
703.32 -> because if you are on the slash route it first renders the
706.44 -> layout and then it renders this page and the contents
709.92 -> of this page will sit inside wherever children is present.
714.06 -> So children is simply corresponding to the page that is being rendered.
718.66 -> Okay so You can also have layouts within your folders.
722.44 -> So for example, I can have another layout inside my
726.26 -> folder here. So I'm just going to create a new file called layout.asx
730.08 -> again here. And here I'll need to export default another
734.06 -> component. I'm going to, let us just call this about layout. And it
737.72 -> also needs to take children. All layouts need to take
740.94 -> in children prop. If you don't take children prop, then that means
745.52 -> that all the pages will return the same content.
750.86 -> There'll be nothing specific to the pages in that layout. Anyway,
754.28 -> so now what I'll do is I'll render div and then I'll
758.3 -> render children. And just here, I'll put in a h2 called
762.24 -> about layout. So now, If I go to the
767.32 -> slash about route, I should see blogging app
772.48 -> and then about it will render this. And this has been rendered by
776.52 -> about layout and this is rendered by the about page. I can go a step
780.02 -> further. I can create another folder here, maybe something like
784 -> team. And then inside that I can create a page.tsx and here
788.26 -> let's say I return function
792.88 -> team page
795.14 -> and here let me render team.
801.06 -> So now so this is rendering layout 1, layout 2
805.74 -> and then finally about And if I go to slash about and
809.38 -> slash team, then I should see both layouts rendered
814.22 -> and then finally teams. So it has rendered this layout and then
818.36 -> this layout within that layout and then finally team. So this is how you know,
821.4 -> Nexus 13
824.44 -> app folder is so much superior to the pages folder. Pages
827.96 -> did not have a concept of layouts and you had to customize,
832.44 -> you had to create multiple layouts yourself and then to
836.46 -> nest different layouts one within the other, there was
840.48 -> so much work to do. And this app folder simplifies this
843.84 -> greatly. And again, needless to say, you can also create more layouts within your
847.2 -> team and so on. And then ideally, you know, in production
850.92 -> apps, for example, if I show you Nix Base,
854.44 -> my boilerplate that I'm working on, I generally have something like
857.52 -> this. I have different folders like authenticate pages, external
863.56 -> pages. So if you put a folder within brackets, then
868.38 -> this will not be added to the route. We'll get to that later,
871.4 -> but you can neatly segregate all of your layouts together
874.44 -> and have different layouts for different pages. So in this case,
877.96 -> I have a blog route, I have a docs route, I have a set of login
881.48 -> pages, right? There is so much
886.9 -> organization to your code in the app folder that you did not have with
889.94 -> the pages folder. So I'm really happy with the app folder.
895.76 -> So I hope you also see the value in using the app
899.76 -> router. There are so many again bugs that they are actively fixing,
903.68 -> especially in the alpha parts of the app folder, which are server
907.2 -> components. But overall, I think my experience has been
910.8 -> very pleasant with the app folder. Anyway, so now
915.06 -> Let's start integrating Superbase. So what I'll do is I'll
919.28 -> create a new file called
923.04 -> dot env dot local. And I want to, in
928.18 -> fact, let's just check out a Superbase guide. Superbase app
933.02 -> next JS.
937.38 -> Yep, we have a guide here. So let's,
941.82 -> we can do this, but anyway. So, we need we need this.
946.56 -> We need to add this to our env.local.
950.82 -> So these are your environment variables that are generally written in
955.12 -> .env.local file. And you should not be committing them to git.
959.38 -> You have to make sure that your .env files, yeah, so this
962.52 -> is git ignored, so that is good.
965.92 -> So your environment variables should be present inside .env files
969.16 -> or .env.local files and they should not be committed to git repository for
972.74 -> security reasons because other people can also see your code see your
976.24 -> environment variables your secrets and will be able to access
979.78 -> your app on their end. We don't want that. So .env.local
984.84 -> is a perfect way to do that here. And when you deploy
987.94 -> it to Vercel or Netlify, you will add these env variables
991.56 -> to that project in their secret manager or environment
995.08 -> manager sections. We'll see that eventually, but yeah. So
1000.32 -> let's go back to our project. And here we can go to,
1004.1 -> I think it's in settings, API. So we have your
1009.02 -> URL. You have to copy that and then paste it here
1014.86 -> and then grab the Anon key
1018.86 -> and then paste that here.
1022.52 -> Okay. So next we also need to install super base.
1026.9 -> So let's install yarn add super base, super base
1030.9 -> JS.
1032.94 -> And we'll also install auth helpers I think. Let's take a look at
1036.06 -> the guide again. Yeah, we need auth helper. So let's grab
1040.92 -> this.
1044.52 -> And do yarn add. I personally use yarn, but you're free to use
1048.38 -> npm if that is your preference. Okay, so there is some login code
1051.64 -> here that will eventually get to later For now, we'll just focus on
1055.14 -> connecting our super base to our next app today Tomorrow
1059.24 -> or in the next video, we'll see how we can add login
1062.34 -> and sign up features to our app but for now, what we'll do
1065.62 -> is let's go to
1068.4 -> Let's go to our our
1071.4 -> super base project and let us create a new table and we will just call
1074.94 -> this blog posts
1079.98 -> ok
1082.52 -> and id is fine. So these are the current columns that are present
1086.4 -> here. So, let us disable row level security for now we will
1089.62 -> come back to this later and let us add a title for
1093.94 -> our blog and we want this to be a text field
1097.84 -> and this cannot be null. So let's remove that.
1102.54 -> Let's also add a content field,
1106.68 -> which will also be a text field and it also cannot be null.
1112.72 -> Okay, now let's save this table. Now, let us save this table
1127.24 -> ok. So, now, that the table is good to go, yeah, so this is a warning
1131.06 -> which is pretty important, but we will eventually fix this. Let us quickly
1135.68 -> insert a row. Let us add a row, we do not need to add
1139.44 -> ID, it will be auto generated. So, let us create a title called
1142.76 -> lorem ipsum
1147.26 -> and let us just get some text from lipsum dot pro
1160.54 -> yep this is fine. So, and let us save this
1165.88 -> So, now, we have one block post here let us add another
1183.56 -> one And another one ok.
1197.04 -> So, now we have 3 blog posts or you know what Eventually
1200.58 -> will be much better blog post, but for now, this is a good start.
1203.82 -> So let's start populating these blog posts and show them
1207.7 -> in our app. So we'll leave our homepage as it is.
1212.38 -> Let's go to our, in our app folder, let's create a new section called
1216.28 -> blog, a new folder. And here let's create a new file called
1221.34 -> page.tsx again. The page for, this will be our blog
1226.58 -> page component. So let's export default function,
1230.9 -> blog page. And here we need to somehow fetch our blog
1235.32 -> articles.
1238.94 -> So by default in Next.js 13, all of these components,
1243.68 -> all of these pages and layouts, these are server components.
1247.8 -> So these components are rendered in the server
1253.48 -> in a very secure way. So it's like, first of all, they only
1257.8 -> run on the server. They do not run on the client. By default,
1260.4 -> all of these components only run on the server and not on the client.
1263.48 -> And we'll discover more features about server components eventually,
1267.2 -> but the new feature about server component is that they can be async.
1272.04 -> So,
1274.6 -> in other words, this function is returning a promise of JSX
1278.56 -> content but that works perfectly fine. So if I
1282.54 -> go back
1285.68 -> to my app and go to slash blog page,
1289.54 -> we are able to see this. First of all I am really annoyed with this
1292.66 -> layout So let me just quickly fix that. Let's remove all of these unnecessary
1296.76 -> styles.
1304.96 -> Let's remove global.js. I don't care about that. This is good,
1309.2 -> this is completely fine. So now we have a blog route and
1313.2 -> our blog page is rendered, but the thing you have to note here is that
1317.1 -> this is a very different component. It is async and Until
1320.38 -> now, and even today, client components, the traditional
1324.02 -> React components will not work with async keyword. React server
1327.96 -> components, the new feature in Next.js 13,
1332.18 -> which Next.js 13 supports React server components, and these components can
1335.3 -> be asynchronous. So what this means is that you can do data fetching
1338.94 -> here. So you can do something like await fetch my data and something like
1341.82 -> that. Okay, so let's do that. So what we'll do is, let's
1345.84 -> do await. We'll create a new function called await async
1353.06 -> fetch, async function fetch blog posts. And
1358.1 -> this is, we'll do something here to interact with the Superbase database.
1361.68 -> So the first step here would be to create a Superbase client And the way to
1365.52 -> do that would be to do import from super base auth helpers
1370.14 -> next JS. And what we want to do here is we want to import
1373.9 -> create server component client. So we are working with server components
1377.72 -> in React and we want to create a server component client. So let's
1381.02 -> create a server component client here const super base
1385.34 -> equals create server component client and it takes a
1389.52 -> configuration
1391.78 -> and you have to pass in cookies and this is just something that
1395.66 -> we have to get used to. We don't really care about what
1400.58 -> the logic behind this is at this point, but we'll discuss this when
1403.6 -> we discuss route handlers. It may be, I think, the 10th or 11th video
1407.88 -> in this course, but for now, just import this from next
1411.72 -> headers, grab the cookies object and send it to create server client.
1415.74 -> It's fine. It's fine if you don't understand this for now, but
1418.94 -> this is all tied into how authentication works in Superbase and
1422.74 -> Next.js. We just need to link Superbase and Next.js together
1426.64 -> by passing the cookies, read-only cookies, utility to
1431.42 -> create server component client. Don't worry about it. We'll come back to this later.
1435.44 -> So now this creates super base client.
1438.98 -> And now we can now fetch our blog posts using,
1443.94 -> Copilot already did this for us, but let me just do it
1447.28 -> myself. So grab the super base client,
1452.1 -> client and use dot from, and then what is
1455.66 -> the name of our table? The name of our table is blog
1460.08 -> post.
1465.52 -> So, from blog underscore post, and we want to select
1469.6 -> all columns, and we don't really want to filter by using
1473.26 -> any conditions for now. So it's fine if you just leave it as this.
1477.06 -> And this command will run and return us
1482.98 -> a response. And this response contains data and an error message
1486.4 -> if there's an error. So the first question that you might ask
1490.28 -> is, first of all, how is it connecting to my database? So create server
1493.94 -> component client automatically looks for these two variables.
1498.38 -> So these two are not random arbitrary values. All Superbase Auth
1502.08 -> Helper
1504.74 -> clients are written to look for these two in the environment
1508.56 -> variables, next public Superbase URL and next public Superbase AnonKey.
1514.64 -> If you name these environment variables differently, then you'll have to pass
1517.96 -> them manually.
1520.64 -> Right? So if your environment variables, if you want, if you're
1524.28 -> too fancy and try to create your own and different names like
1527.04 -> my blog post, super base URL or my blogging app, super
1530.32 -> base anon key, then you have to pass them yourself manually by using
1533.52 -> superbase key is this and superbase URL is that, but otherwise,
1537.06 -> by default, it looks for those environment variable values. So,
1540.04 -> there's nothing much to do. This will automatically connect to your superbase
1543.38 -> database. Okay. So, now, a response contains both
1547.78 -> data and error message.
1550.66 -> So now, if there's an error message, then you want to throw
1554.58 -> that, and otherwise we'll simply return the data. So now,
1559.68 -> let's fetch our blog post using this, fetch blog
1563.42 -> post is equal to await fetch blog post. For now it's fine
1568.3 -> um there is no type safety at this point we haven't really
1571.82 -> configured TypeScript with superbase at this point because It does not
1575.72 -> know the shape of the blog post table yet. So ideally
1579.16 -> we want data to be typed and the data array
1583.2 -> to have the shape containing the title and content and all of
1586.94 -> those fields that we already created here. But we'll get to that
1589.96 -> in the next video. But for now, let's assume the title and
1593.34 -> content are present and let's change the structure to
1597.66 -> a div and then I want to add some spacing. So class
1601.44 -> name space Y4, just to give some spacing and
1606.74 -> I'll create a block heading and then div class name
1611.04 -> equals space by two a little bit closer and here
1614.62 -> I want to map over my blog post so blog post is an array
1617.8 -> we know that and so we'll simply map over
1622.16 -> all of my blog posts. For each blog post,
1628.36 -> I want to return a div. The key is post.id.
1637.52 -> And let's close the div. And here I want to render a
1641.9 -> paragraph with post.title
1646.54 -> and another paragraph with post.content. And let's make this
1653.92 -> text xs. Let's keep this very small and maybe text
1658 -> gray, I think. Gray finite will be good.
1665.36 -> Are we missing anything here? Why is there a...
1670.9 -> Okay, I think we are missing this. Okay, nice. So now let's
1674.82 -> take a look at our web app. There we go.
1680.06 -> So we have a working app that is connecting Next.js
1683.6 -> 13 and Superbase. We're able to fetch some data from
1688.2 -> our blog post table. And we are fetching that
1693.08 -> using our Superbase client that we created using create server component client
1696.28 -> from Superbase Auth Helpers. So now,
1700.74 -> let me just quickly address this warning. So row level security,
1704.14 -> so what even is it? So row level security, it means that
1708.36 -> all of your rows are secure by some design.
1712.28 -> So for example, if you don't want your blog posts to be
1715.64 -> viewable by people who don't own it, or maybe if you
1719.92 -> want to make them private until they're published, right? So maybe
1723.84 -> you want to have a status field here and only published posts should
1726.88 -> be visible. So you can write all of these conditions using row level security.
1731.18 -> So let us say first of all if I enable row level security
1735.56 -> itself then that means that by default all of these rows will be hidden.
1738.86 -> So let me enable this and quickly reload the page.
1744.54 -> The blog is empty. There are no blog posts. Because even though there are
1748.2 -> blog posts, because row-level security is enabled, by default
1751.58 -> all of these rows are not visible. So what I'll do is I'll add a new policy,
1756.26 -> and the policy is I want read access to be available for
1759.28 -> everyone. So this policy looks good to me. I don't want to make any changes to
1762.84 -> this one. So I'll just use this template and this is fine to me.
1767.5 -> By default, all roles are selected, but if you only want, let us say,
1770.32 -> authenticated users to see, then you can select authenticated here.
1773.6 -> But I'm fine with this policy. And I'm going to save
1777.5 -> this policy. So now row level security is enabled, read access is
1781.2 -> enabled. So now if I reload the page, I should see all of my blog
1784.44 -> posts appear once again. Okay, so this is a, I think in my
1788.84 -> opinion, a good start for our course. So in the next video,
1792.54 -> we'll see how we can add authentication and how we can allow
1796.48 -> users to log in and allow users to create blog posts
1800.48 -> and show those blog posts on their profile. Okay. So once
1805.02 -> again, thanks. Thanks everyone for watching this video. Please check out
1808.08 -> my my sass boilerplate called next base, which is present
1811.64 -> at use next base.com. It's a powerful boilerplate that will allow you
1814.98 -> to create your SAS project super super quickly and I hope you have a
1818 -> great time. Have a good day. Bye bye.
Source: https://www.youtube.com/watch?v=Xh48SXVGJvk