section-engineering-education / engineering-education

“Section's Engineering Education (EngEd) Program is dedicated to offering a unique quality community experience for computer science university students."
Apache License 2.0
364 stars 890 forks source link

A Beginner Guide to Fullstack Next.js with TypeScript and Firebase database #3760

Closed Rose-stack closed 2 years ago

Rose-stack commented 3 years ago

We ask that you please be patient as our team works through approving and publishing all articles/tutorials in a timely manner. Allow 1-3 days for a topic to be reviewed and/or approved - allow 3-7 days for an articles to be reviewed and/or published.

Be sure to visit our Resources Page for tools, resources, and example articles to go over.

NOTE: (Please ensure that you have only one open issue + linked pull request at a time. This will ensure that we complete the article in a timely manner from inception to publishing.)

NOTE: We tend to stray away or tend not to publish reviews/comparisons of commercial product offerings.

We're looking for the first 2-3 paragraphs of the article that appropriately summarize what your article will be about.

Proposed title of article

Your title should be descriptive of the article/tutorial. Be Specific. Use keyword research to gain your article higher ranking.

A Beginner Guide to full-stack Next.js with Firebase Database

Introduction paragraph (2-3 paragraphs):

Please write the Introductory paragraph(s), that would be included in your article. We will use this writing snippet to help us assess overall quality before approval. We're looking for the first 2-3 paragraphs of the article that appropriately summarize what your article will be about. Take your time and write the content as you would intend to get it published.

Next.js is a javascript framework that lets you build server-side rendering and static web applications using React as a client-side web-driven framework like vue.js, angular.js. It has a number of features that make it great such as pre-rendering, CSS in js, and many more.

Next.js is a hybrid framework. It is the easiest way to build react applications. It includes a lot of functionalities that you would need to use in your react application that are easily extensible and easily customizable.

Since it is a hybrid, it means it can be used for either CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static-Site Generation). Meaning you can use databases and perform data fetching using Next.js. This makes it a Static Site Generation framework (SSG), meaning you will build pre-rendered sites that load blazingly fast.

Next.js is also database agnostic. For SSR, Next.js can be used with different databases such firebase, MongoDB, mysql, etc. This guide will use firebase and demonstrate how we can integrate it into a Next.js application.

Key takeaways:

What are the 3-5 most important things the reader should understand or be able to do after reading this article? Use this area to get your ideas down on the bulk of your article or tutorial.

References:

Please list links to any published content/research that you intend to use to support/guide this article.

Templates to use as guides

WanjaMIKE commented 3 years ago

Good afternoon and thank you for submitting your topic suggestion. @Rose-stack Your topic form has been entered into our queue and should be reviewed (for approval) as soon as a content moderator is finished reviewing the ones in the queue before it.

hectorkambow commented 3 years ago

@Rose-stack How will this article differ from what is published our other blog sites

WanjaMIKE commented 3 years ago

Closing since there is no feedback for a while. We can reopen later. Thanks

Rose-stack commented 3 years ago

@Rose-stack How will this article differ from what is published our other blog sites

@hectorkambow, Apart from implementing Next.js with Firebase, this article will be introductory friendly to a next.js beginner developer. The article will first discuss the concept o firebase as a database and Next.js as a React.js-based Framework. Then discuss step by step how to run an application using the Two. I will also ensure the use case discussed here has not been published in other blogs, with inline comments to explain the code well.

hectorkambow commented 3 years ago

Sounds like a helpful topic - lets please be sure it adds value beyond what is in any official docs and/or what is covered in other blog sites. (the articles should go beyond a basic explanation - and it is always best to reference any EngEd article and build upon it).

Please be attentive to grammar/readability and make sure that you put your article through a thorough editing review prior to submitting for final approval. (There are some great free tools that we reference in EngEd resources.) ANY ARTICLE SUBMITTED WITH GLARING ERRORS WILL BE IMMEDIATELY CLOSED. Please be sure to double check that it does not overlap with any existing EngEd articles, articles on other blog sites, or any incoming EngEd topic suggestions (if you haven't already) to avoid any potential article closure, please reference any relevant EngEd articles in yours. - Approved