The Beginners Guide to Building Production-ready Apps with Next.js Part One The What, How, and Why of Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • SWR

    React Hooks for Data Fetching

  • When dealing with pages that handle user-specific data or a page that does not need to consider SEO, data can be fetched on the client-side using standard React hooks or SWR - a React hook built by the Next.js team that provides a really solid and comprehensive way of fetching and persisting data from the client.

  • Next.js

    The React Framework

  • . Since you may want to have certain data that is set globally, default data, or page-specific data Next.js will automatically merge your tags and for any data that might be duplicated, it will default to the lowest instance (i.e. page meta would override global app meta). See the [Next.js docs](https://nextjs.org/docs/api-reference/next/head) for additional information on configuring your sites `````` component. ### FullStack Friendly Another feature worth noting in Next.js is its ability to handle [serving API endpoints from your project](https://nextjs.org/docs/api-routes/introduction). Getting started with an API is pretty straightforward, you need to create an ```api``` folder in your pages directory then define the routes of the API just as you would when defining new pages. Since Next.js runs on Node, you can interface with databases securely without delivering server-specific files to the client. One caveat to the API system in Next.js is that if you are only serving static files - meaning that you are just deploying the build folder rather than keeping your server running, your API will not work as it requires a live server to handle requests. ### Deployment If it didn't have enough great things about it already, the team that built and maintains Next.js also built a hosting platform called [Vercel](https://vercel.com/solutions/nextjs). Apps can easily be deployed to Vercel with minimal configuration. You can of course also deploy to other platforms such as [Netlify](https://www.netlify.com/) and [Heroku](https://www.heroku.com/). ## Why you should consider Next.js Next.js comes with a whole suite of features and optimizations that help you build production-ready apps. The different methods available give you a lot of freedom to define how you want your app to function. The ability to seamlessly build a full-stack application helps bridge the divide between front-end and back-end into a single optimized codebase. There is a good reason large web apps like [Twitch and Hulu are built with Next.js](https://nextjs.org/showcase). If you haven't gotten around to using Next.js I hope this article has helped you reconsider. ## Conclusion My experience developing with Next.js has been overwhelmingly positive. Now that you have seen all the wonderful things Next.js brings to the table, I think it's time to build. In the next entries in this series, we will explore the many amazing features Next.js has to offer by building a real application. If you are as excited about Next.js as I was after learning what it could do, you should 100% play around with it before starting the next part in this series. There is so much more that I didn't cover, again I am going to link to the [Next.js docs](https://nextjs.org/docs/getting-started) so that you can give them a read (notice a trend here?). —- If you found this article interesting I would love to hear from you in the comments or feel free to reach out on [Twitter](https://twitter.com/trammellwebdev), my DM's are always open! I will update this post as new sections are released so be sure to follow me on [Hashnode](https://blog.huntertrammell.dev/) to stay up to date with my latest posts. Cheers 🍻

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Using Next.js with Fauna and GraphQL

    3 projects | dev.to | 7 Sep 2021
  • How to best handle fetching the same data for many pages?

    2 projects | /r/nextjs | 23 Aug 2021
  • Should I build my project with Next.js or with React+Redux?

    2 projects | /r/nextjs | 7 Aug 2021
  • Is Next.js planning to release a method for querying data at the component level?

    3 projects | /r/nextjs | 20 May 2021
  • I created a Hackernews client with Next.js and TailwindCSS.

    2 projects | /r/nextjs | 8 Apr 2021