"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", ul: "ul", ..._provideComponents(), ...props.components }, {Image, StepCheck, VideoDemo} = _components; if (!Image) _missingMdxReference("Image", true); if (!StepCheck) _missingMdxReference("StepCheck", true); if (!VideoDemo) _missingMdxReference("VideoDemo", true); return _jsxs(_Fragment, { children: [_jsx(VideoDemo, { src: "/videos/devmedium.mov" }), "\n", _jsxs(_components.p, { children: ["I recently took a course on Next.js with Firebase by ", _jsx(_components.a, { href: "https://fireship.io", children: "Fireship.io" }), " to essentially learn how to Integrate Next.js with Firebase services like Firestore, Storage, Real Time Database and Authentication. I learned quite a few things about how to beautifully extract features of Next.js like ", _jsx(_components.code, { children: "Server-Side Rendering" }), " and ", _jsx(_components.code, { children: "Incremental Static Regeneration" }), " and integrate them in a blogging platform, wherever they are most suitable."] }), "\n", _jsxs(_components.p, { children: ["The features of ", _jsx(_components.a, { href: "https://devmedium.vercel.app", children: "DevMedium" }), " are:"] }), "\n", _jsx(StepCheck, { title: "Server-Side rendered content on the go 🚀" }), "\n", _jsx(StepCheck, { title: "Image upload with Firebase storage 📸" }), "\n", _jsx(StepCheck, { title: "Create / Read / Update / Delete posts ✍🏻" }), "\n", _jsx(StepCheck, { title: "Custom Username creation 🙆🏻‍♂️" }), "\n", _jsx(StepCheck, { title: "Signin with Google 🤙🏻" }), "\n", _jsx(StepCheck, { title: "Incremental Static Regeneration, Static Site Generation 🦾" }), "\n", _jsx(StepCheck, { title: "Like other posts you love, Unlike if not ❤️" }), "\n", _jsx(StepCheck, { title: "Write posts in Markdown with Live Preview, Render in HTML 🌿" }), "\n", _jsx(_components.h2, { children: "Application Breakdown" }), "\n", _jsxs(_components.p, { children: ["The complete source code of the application can be found in my ", _jsx(_components.a, { href: "https://github.com/ajithkumar110302/devmedium", children: "Github Repo - DevMedium" })] }), "\n", _jsx(_components.p, { children: "The application is divided into various categories, where each category serves its own purpose." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/pages/*" }), " contains all the routes which are being served."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/components/*" }), " contains all the reusable components which we import into our pages directory."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/lib/*" }), " contains all the library methods and helper functions. For example, we keep custom Hooks, Firebase related things here."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/styles/*" }), " contains all the styling related stuff."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/public/*" }), " contains all the public facing data, like logos, client side JS etc."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Essentially, the application flow looks like this:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A user comes, registers on the application." }), "\n", _jsx(_components.li, { children: "After successful registration, the user is redirected to the username screen, where they can generate a unique username." }), "\n", _jsx(_components.li, { children: "After successful username creation, they are redirected to the home page, where they can create posts." }), "\n", _jsx(_components.li, { children: "They can go to the homepage and see all the posts written by all the users." }), "\n", _jsx(_components.li, { children: "They can heart a post they like, or unheart it." }), "\n", _jsx(_components.li, { children: "On the admin page, A user can see their created posts." }), "\n", _jsx(_components.li, { children: "They can perform Create / Read / Update / Delete operations, all in real time." }), "\n", _jsxs(_components.li, { children: ["They can edit their content live in markdown, click on ", _jsx(_components.code, { children: "preview" }), " to get a real time preview of the blog they are about to publish."] }), "\n", _jsx(_components.li, { children: "A user can decide to publish or unpublish a blog." }), "\n"] }), "\n", _jsx(_components.p, { children: "Lets move over to each step and discover the various approaches and caveats there are:" }), "\n", _jsx(_components.h2, { children: "Authentication" }), "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/authpage.png" }), "\n", _jsx(_components.p, { children: "For signing in, Google Signin is used which comes bundled with Firebase Authentication. It is an excellent way to add authentication to our FUll-stack applications because it requires minimum configuration.\nInitialize your application with firebase auth and use it as follows:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:/lib/firebase.js", children: "import \"firebase/auth\";\n\n// code...\n\n\nexport const auth = firebase.auth();\n\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:/pages/enter.js", children: "import { auth, firestore, googleAuthProvider } from \"../lib/firebase\";\n// code...\n\nfunction SignInButton() {\n const signInWithGoogle = async () => {\n await auth.signInWithPopup(googleAuthProvider);\n };\n return (\n \n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Now, we need to store the information in our firebase firestore. For that we create two fields, ", _jsx(_components.code, { children: "users" }), " and ", _jsx(_components.code, { children: "usernames" }), " which have two-way mapping.\nThis is a simple way of authenticating a user with Firebase."] }), "\n", _jsx(_components.h2, { children: "Username creation" }), "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/username.png" }), "\n", _jsxs(_components.p, { children: ["Firebase does not come with a custom username or unique username fields, so we create it by ourselves from scratch.\nThe username creation for in itself is very complex and requires some other packages as well (for simplicity, we'll use ", _jsx(_components.code, { children: "lodash.debounce" }), ").\nThe overview is as follows:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The user signs in -> redirected to the username creation form (If they don't already have a username)." }), "\n", _jsxs(_components.li, { children: ["When the user starts typing for a name, we use a technique called debounce. That is we wait for the user to stop typing (we can specify the waiting time) and then perform a read on the database to check if the username already exists in the ", _jsx(_components.code, { children: "username" }), " collection. This way, we minimize the number of ", _jsx(_components.code, { children: "read" }), " operations on the firestore database."] }), "\n", _jsxs(_components.li, { children: ["We ", _jsx(_components.code, { children: "batch.set()" }), " if the user decides to choose a username. Which means if the username is available, we commit the data in both ", _jsx(_components.code, { children: "users" }), " collection and ", _jsx(_components.code, { children: "usernames" }), " collection. Te ", _jsx(_components.code, { children: "batch.set()" }), " function allows to either set both the values at the same time, or both fail at the same time."] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:pages/enter.js", children: "// username creation form\n// Hit the database for username match after each debounced change\n// useCallback is required for DEBOUNCE - lodash package function to work\n\n const checkUsername = useCallback(\n debounce(async (username) => {\n if (username.length >= 3) {\n const ref = firestore.doc(`usernames/${username}`);\n const { exists } = await ref.get();\n console.log(\"Firestore read executed!\");\n setIsValid(!exists);\n setLoading(false);\n }\n }, 500),\n []\n );\n // rest of the code\n return (\n !username && (\n

Choose Username

\n )\n );\n" }) }), "\n", _jsx(_components.h2, { children: "Homepage" }), "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/homepage.png" }), "\n", _jsxs(_components.p, { children: ["The Homepage contains a Navbar with Links to various pages. On the Homepage, We first set the ", _jsx(_components.code, { children: "LIMIT" }), " value to whatever number of posts we want to show on the page. We use complete Server-Side Rendering here since the data can change more often on this particular page.\nWe then query the firebase firestore for the ", _jsx(_components.code, { children: "LIMIT" }), " (lets say 10) number of posts and fetch more data when ", _jsx(_components.code, { children: "Load More" }), " button is clicked.\nThis is an optimization technique since we donot want to show all the posts at once. If we do, it'll be lots of read operations for a single user and will take more time."] }), "\n", _jsx(_components.p, { children: "Once the user clicks on load more, we can generate another set of 10 posts using firebase methods and render it on the client in real-time." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:/index.js", children: "// Max post to query per page\nconst LIMIT = 5;\n\nexport async function getServerSideProps(context) {\n const postsQuery = firestore\n .collectionGroup(\"posts\")\n .where(\"published\", \"==\", true)\n .orderBy(\"createdAt\", \"desc\")\n .limit(LIMIT);\n\n const posts = (await postsQuery.get()).docs.map(postToJSON);\n\n return {\n props: {\n posts,\n },\n };\n}\n\n\n// Code...\n\n\n\n{!loading && !postsEnd && (\n\n)}\n\n\n const getMorePosts = async () => {\n const last = posts[posts.length - 1];\n\n const cursor =\n typeof last.createdAt === \"number\"\n ? fromMillis(last.createdAt)\n : last.createdAt;\n\n const query = firestore\n .collectionGroup(\"posts\")\n .where(\"published\", \"==\", true)\n .orderBy(\"createdAt\", \"desc\")\n .startAfter(cursor)\n .limit(LIMIT);\n\n const newPosts = (await query.get()).docs.map((doc) => doc.data());\n\n };\n\n" }) }), "\n", _jsx(_components.h2, { children: "Admin page - Posts creation and Management page" }), "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/admin.png" }), "\n", _jsxs(_components.p, { children: ["Here, A user, which is logged in, can see their created posts (published and unpublished) and create new posts. While the CRUD of managed posts are easy to understand, the creation of a post is interesting here.\nWe use ", _jsx(_components.code, { children: "Loadsh - kebabcase" }), " package to safely create a slug for the post title that we create. We then store the posts in a ", _jsx(_components.code, { children: "Sub - Collection" }), " called ", _jsx(_components.code, { children: "posts" }), " in usernames collection. Instead of creating a root level ", _jsx(_components.code, { children: "posts" }), " collection, we created a nested subcollection inside of ", _jsx(_components.code, { children: "usernames" }), " collection which will have ID as the ", _jsx(_components.code, { children: "slug" }), " of the post."] }), "\n", _jsxs(_components.p, { children: ["The posts collection has various fields associated with it like ", _jsx(_components.code, { children: "createdAt" }), ", ", _jsx(_components.code, { children: "updatedAt" }), ", ", _jsx(_components.code, { children: "title" }), ", ", _jsx(_components.code, { children: "slug" }), " etcetera."] }), "\n", _jsxs(_components.p, { children: ["Once a post is created, The user is redirected to the post edit page where the user can set the post to ", _jsx(_components.code, { children: "published: boolean" }), " values and upload images, write content, preview it and more."] }), "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/editpost.png" }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Image Upload" }), " feature takes help of Firebase ", _jsx(_components.code, { children: "Storage" }), " to store images in Storage bucket."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:Components/ImageUploader.js", children: "import { auth, storage, STATE_CHANGED } from \"@lib/firebase\";\n\n// code ...\n\n const uploadFile = async (e) => {\n // Get the file\n const file = Array.from(e.target.files)[0];\n const extension = file.type.split(\"/\")[1];\n\n // Makes reference to the storage bucket location\n const ref = storage.ref(\n `uploads/${auth.currentUser.uid}/${Date.now()}.${extension}`\n );\n setUploading(true);\n\n // Starts the upload\n const task = ref.put(file);\n\n // Listen to updates to upload task\n task.on(STATE_CHANGED, (snapshot) => {\n const pct = (\n (snapshot.bytesTransferred / snapshot.totalBytes) *\n 100\n ).toFixed(0);\n setProgress(pct);\n });\n\n // Get downloadURL AFTER task resolves (Note: this is not a native Promise)\n task\n .then((d) => ref.getDownloadURL())\n .then((url) => {\n setDownloadURL(url);\n setUploading(false);\n });\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Once the user clicks on the image upload, the Loading spinner comes, and we show a ", _jsx(_components.code, { children: "% Upload" }), " field. This field is generated with the help of ", _jsx(_components.code, { children: "task" }), " and ", _jsx(_components.code, { children: "STATE_CHANGED" }), " listeners provided by Firebase."] }), "\n", _jsx(_components.h2, { children: "Routes" }), "\n", _jsxs(_components.p, { children: ["All the routes are nexted under the ", _jsx(_components.code, { children: "pages" }), " folder."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/index.js" }), " - Landing page, Render all the posts here with Like Counter feature and Load more feature."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "enter.js" }), " - A Login page, with Three components, 'SignIn', 'SignOut' and 'UserForm' which are rendered based on the Auth State of the user."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/[username]/index.js" }), " - User Profile page, Here the user can see all the posts from him along with the username. This route is public, Anyone can see any user with their posts."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/[username]/[slug].js" }), " - A Single post page, here the user can see the post in detail (The actual blog post)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/admin/index.js" }), " - This is the Admin's psot page. See all your Published and unpublished posts. Also you create a new post here."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/admin/[slug].js" }), " - Here you perform CRUD on whatever you post you want to, The slug is the unique identifier for the post you want to perfom CRUD on."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Additionally, firestore rules are deployed to make sure the database remains secure and is only accessed in a way we want." }), "\n", _jsx(_components.h2, { children: "Important Decisions on SSR, ISR and SSG" }), "\n", _jsxs(_components.p, { children: ["While developing the application, It is really important to keep in mind which strategy you want to use and how do you plan on using it.\nFor example, The index page, i.e. the home page is dynamic in nature, that means the content on the page can change pretty often and we want to see the latest content there\nfor that scenario, we use ", _jsx(_components.code, { children: "getServerSideProps" }), " , i.e. Server-Side Rendering so that we get the most up to date page there."] }), "\n", _jsxs(_components.p, { children: ["For the ", _jsx(_components.code, { children: "edit-post" }), " page or the ", _jsx(_components.code, { children: "posts" }), " page, we use something called Incremental Static Regeneration, which means that we fetch the data after some time limit periodically.\nOn the posts page, we fetch the data every 100ms and see if it has changed. If it is not changed, we stick to the static version of the page. If it does infact change, we get the latest post from the server and cache it."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx:/[username]/[slug].js", children: "export async function getStaticProps({ params }) {\n const { username, slug } = params;\n const userDoc = await getUserWithUsername(username);\n\n let post;\n let path;\n\n if (userDoc) {\n const postRef = userDoc.ref.collection(\"posts\").doc(slug);\n post = postToJSON(await postRef.get());\n\n path = postRef.path;\n }\n\n return {\n props: { post, path },\n revalidate: 100,\n };\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Here, the ", _jsx(_components.code, { children: "revalidate" }), " option is responsible for fetching the data periodically."] }), "\n", _jsx(_components.p, { children: "Apart from that, all the other components which do not even require any data, can be generated as static HTML and rendered on the page." }), "\n", _jsx(_components.h2, { children: "Miscellaneous" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "HeartCounter" }), " in itself is a component which is related to a Post and a User both. A Post can have Many hearts so it is a one-to-many relationship."] }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "Metatags" }), " component is a reusable piece of component which can be used on every page to generate metatags for that page for every social media network or search engine bots."] }), "\n", _jsxs(_components.li, { children: ["We have a custom ", _jsx(_components.code, { children: "404 page" }), " which is rendered when a page is not found.", "\n", _jsx(Image, { src: "/static/images/blogging-platform-nextjs/404.png" }), "\n"] }), "\n", _jsxs(_components.li, { children: ["We have a ", _jsx(_components.code, { children: "AuthCheck" }), " component which checks the Auth on every level of the tree. ", _jsx(_components.code, { children: "useContext()" }), " and ", _jsx(_components.code, { children: "createContext()" }), " is used for managing state (particularly Auth State) in the entire application."] }), "\n"] }), "\n", _jsx(_components.p, { children: "That was a basic overview of the entire application." }), "\n", _jsxs(_components.p, { children: ["If you liked it, make sure you ⭐️ the ", _jsx(_components.a, { href: "https://github.com/ajithkumar110302/devmedium", children: "GitHub Repo" }), " 🔥"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://devmedium.vercel.app", children: "Live Demo" }), "\n", _jsx(_components.a, { href: "https://github.com/ajithkumar110302/devmedium", children: "Source Code" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }