Next.js

Next.js

Application and Data / Languages & Frameworks / Frameworks (Full Stack)
Front-end Engineer at Purple Software·
Needs advice
on
Angular 2Angular 2
and
Next.jsNext.js

Hi Guys, I am thinking of moving from Angular 2 to Next.js. What are the benefits and disadvantages that I would face with your experience?

READ MORE
3 upvotes·16.6K views
Senior Software Developer at IT Minds·
Shared insights
at
()

At IT Minds we create customized internal or #B2B web and mobile apps. I have a go to stack that I pitch to our customers consisting of 3 core areas. 1) A data core #backend . 2) A micro #serverless #backend. 3) A user client #frontend.

For the Data Core I create a backend using TypeScript Node.js and with TypeORM connecting to a PostgreSQL Exposing an action based api with Apollo GraphQL

For the micro serverless backend, which purpose is verification for authentication, autorization, logins and the likes. It is created with Next.js api pages. Using MongoDB to store essential information, caching etc.

Finally the frontend is built with React using Next.js , TypeScript and @Apollo. We create the frontend as a PWA and have a AMP landing page by default.

READ MORE
The Leading Web stack of an IT Minds Senior Developer. - DEV Community 👩‍💻👨‍💻 (dev.to)
14 upvotes·527.3K views
Shared insights
at

I'm working as one of the engineering leads in RunaHR. As our platform is a Saas, we thought It'd be good to have an API (We chose Ruby and Rails for this) and a SPA (built with React and Redux ) connected. We started the SPA with Create React App since It's pretty easy to start.

We use Jest as the testing framework and react-testing-library to test React components. In Rails we make tests using RSpec.

Our main database is PostgreSQL, but we also use MongoDB to store some type of data. We started to use Redis  for cache and other time sensitive operations.

We have a couple of extra projects: One is an Employee app built with React Native and the other is an internal back office dashboard built with Next.js for the client and Python in the backend side.

Since we have different frontend apps we have found useful to have Bit to document visual components and utils in JavaScript.

READ MORE
21 upvotes·1.8M views
Frontend Developer at atSistemas·
Needs advice
on
BootstrapBootstrapBulmaBulma
and
UIkItUIkIt

I'm building, from scratch, a webapp. It's going to be a dashboard to check on our apps in New Relic and update the Apdex from the webapp. I have just chosen Next.js as our framework because we use React already, and after going through the tutorial, I just loved the latest changes they have implemented.

But we have to decide on a CSS framework for the UI. I'm partial to Bulma because I love that it's all about CSS (and you can use SCSS from the start), that it's rather lightweight and that it doesn't come with JavaScript clutter. One of the things I hate about Bootstrap is that you depend on jQuery to use the JavaScript part. My boss loves UIkIt, but when I've used it in the past, I didn't like it.

What do you think we should use? Maybe you have another suggestion?

READ MORE
8 upvotes·728.5K views
Replies (7)
Recommends
UIkIt

I have used bulma in several projects. We could not customize with the websites very well. Also when we need "quick solutions" Bulma is not suitable (I mean basic animations, to-top buttons, transparent navbar solutions etc. For these solutions, you need extra js codes).

Everybody knows about Bootstrap (heavy but popular).

Now we start a new project with UI kit, I like it. Pros: It is fast and lightweight and imho it has very good UI. Cons: Small community. Documentation.

Check this link for kick-off. https://github.com/zzseba78/Kick-Off

Maybe it is helpful.

READ MORE
7 upvotes·431.5K views
Front End Web Developer ·
Recommends
Bulma

Been checking out Bulma, myself, and really dig it. I like that it's a great base level jumping off point. You can get a layout going with it, pretty quickly, and then customize as you want. It definitely sounds like it's the one you're leaning towards but a big factor would be who will be using it most? Your boss, yourself, others? Whichever you like best, you'll prob be most productive with but if in the end your boss says it has to be UIkit, then best to be open-minded and give it another shot. Sometimes you may not jive with new tools in your stack, at first, but then they can become tools you learn to love. Best to you in your decision! Take care & keep safe.

READ MORE
6 upvotes·431.4K views
View all (7)
Software Developer at Billow Software·
Needs advice
on
ContentfulContentful
and
SanitySanity

Im building a simple portfolio website using Next.js and all the content is static, what's the best between Contentful and Sanity.

I really like the self-hosting and custom layout with sanity however I don't think time customizing is worth it anymore.

Any thoughts

READ MORE
3 upvotes·78.2K views
Replies (1)
Recommends
Contentful

Hi Nash,

Both have generous free tiers to get going. I find the Contentful free tier (Community) a bit more generous. And I work for Contentful - so I know have bias haha.

See the article I'm including here with the fair-usage policy to learn more.

READ MORE
Fair Use Policy | Contentful (contentful.com)
2 upvotes·1 comment·249 views
Knut Melvær
Knut Melvær
·
October 26th 2021 at 9:14AM

I'm working for Sanity.io – so my interest here is clear, but I'll try my best to relay the objective information.

The generosity depends on how you compare. The biggest difference is that Contentful limits you to 1 free project per organization, while Sanity.io lets you make as many free projects as you want. Contentful will limit you on 48 content types, while Sanity gives you 2000 “unique attributes”, which is far more (it's counted that way because Sanity offers a real-time content lake where you can store JSON documents and it's not limited to the schema you set up in the Studio).

The “fair use” on Contentful's free plan also has hard limits, so even though they give you a bit more on some parameters (users and environments/datasets), Sanity.io offers you pay-as-you-go for API usage on the free plan as well. Contentful gives you 2 locales for free, while Sanity doesn't limit you.

Feel free to reach out to me in our community (slack.sanity.io), on Twitter (@kmelve), or email (knut@sanity.io). I would love to learn more about your hesitations about customizing the studio.

·
Reply
CTO at JobsForIT·
Needs advice
on
ApolloApolloContentfulContentful
and
Next.jsNext.js
in

I am building a POC in Next.js. I usually use CRA+ MobX + Contentful, but this time I want to give a try to Next and GraphQL. Any suggestions on what tool to use for state management/content management? I am looking for a modern and quick to implement solution.

READ MORE
3 upvotes·74.6K views
Replies (3)
Head of Engineering at loveholidays·

Hey Piotr,

It's hard to really give a single recommendation for the things you are looking for, generally because I think content and state are very different things and you can choose to manage both independently.

Therefore I've picked Sanity as an example of a content management platform that you could utilise with your Next.js and GraphQL implementation. I've used Contentful and Sanity and both provide direct GraphQL integrations, so ultimately it's up to you what you want to pick here. As far as CMSes go, Sanity is much more "built it yourself with a good system around you" and Contentful is more of a "here is a platform, go create some content models". You will need more infrastructure for Sanity, but you might also get flexibility from it in the future. It really depends on what your PoC becomes.

As far as state management goes, it really depends on what you are doing. Honestly my advice is don't pick a state management library or tool just yet, and make do with React context, hooks and simple management of components. If things get complicated quickly I would look at how you are architecting data flow and rendering. Having used Apollo Client extensively in the past, you can use it for local state management as well as network calls, but the lines get blurry and I don't think it's very easy to follow when you do that. Having said that, it works out of the box for GQL and will give you what you need to get started. We use URQL in production and we like the simplicity it gives us and the lack of potential caching issues you can come across with Apollo Client.

My advice for Apollo Client is: * Do not nest your queries too much and SSR, renderToString() gets expensive when traversing the DOM tree * We saw benefits of using HTTP Batching for requests, but we also saw lag in the calls * Using Apollo Client works best with Apollo Server (naturally) so anything else can be a bit problematic because it doesn't do all the magic that Apollo Client would like

As you are doing a PoC, do whatever you feel gets you there faster with the GQL implementation. I would say read the docs of both and see which one takes your preference. Both are actively maintained and looked after well.

If you are expecting your PoC to become a fully fledged solution at some point, things to consider about both: * Bundle size * Adaptability when you start having N different GraphQL APIs going into a gateway * Ease of use for other people to pick up. Apollo has better documentation right out of the box.

To summarise, for content management: * Contentful or Sanity

For state management: * All local state with Context and Hooks * All data fetching with Apollo or URQL. My preference here is URQL, but if it's your first time with GrapQL then Apollo will have more support.

Hope that helps!

READ MORE
4 upvotes·1.3K views
Recommends
Apollo

So far, I have found that the best tool to use for state management is the Apollo Client. It is easy to use on the frontend and supports new React features such as hooks. It also removes the need to do any state management because the Apollo Cache, does all the dirty work for you. The main downsides of Apollo are the difficulty manually updating the cache and setting up the Apollo Client with Next.js. Thankfully, Apollo has some great documentation showing how to update the cache and Next.js provides an example of how to use the Apollo Client with SSR.

READ MORE
2 upvotes·522 views
View all (3)
Software Engineer ·
Needs advice
on
JavaScriptJavaScriptNext.jsNext.js
and
RailsRails
in

I've inherited a monolithic Rails app for an MVP product. We're planning to slowly migrate away from RoR to build the remaining parts of the app. App requirements: - Video streaming w/ audio - Real time chat - User authentication & roles - Payment system Performance, scalability, and attracting dev talent(s) are important to our team.

I'm considering the microservices approach, SSR + CSR & caching with Next.js (prefer Svelte-kit but it's in beta). I also prefer to keep this a full JS household. What other JavaScript frameworks/libs would you recommend? Keep in mind the existing RoR will not be deprecated. We'll be consuming the APIs and slowly moving away from them until they can safely be deprecated.

READ MORE
6 upvotes·23.9K views
Replies (2)
CTO at JetThoughts·
Recommends
Rails
Stimulus

Moving from Rails will reduce development velocity (if you want to have easy support and update the app) and will require more skilled (expensive) developers to support it.

Without previous experience (5+ years) do not suggest moving to node.js. That code will easily become hard to learn and support.

You always can implement microservices with Ruby, but this approach should be considered only after Series-A and when you will have more than 5 developers and dedicated SRE/DevOps.

READ MORE
7 upvotes·21.6K views
Full-stack Developer && Software Engineer at Self-employed·

I see it's been some time since this was posted, but I'm glad you are migrating to Next.js 🎉!

Me personally, I would run an Express.js backend so that frontend and backend logics don't feel blurred, especially if you want to attract more developers to your project. Keeping frontend separated from the backend makes for a healthier workspace ecosystem and often confuses people less. Furthermore, implementation is a lot easier and later on as you move from RoR to an Express.js server there won't be too much confusion as to how certain parts mesh together.

Based on the features you're looking at I would consider using websockets (WSS or Socket.IO) for the chat application or rolling that with features from WebRTC, which you would need to support video streaming anyways. For authentication you could look at Auth0 which has some very nice libs for authentication or you could rig up your own stitching individual OAuths (Google, Facebook, etc.) along with a simple User/Pass signup that you manage in your database. For payment I would consider using Stripe, it's very popular in the JS ecosystem right now, has lots of documentation and features, and is also pretty cost-effective.

I know it's been some time since you have posted this and you have already made some decisions, but if you (or anyone else reading this) has any question feel free to let me know :)

READ MORE
4 upvotes·10.6K views
Web/App Dev ·
Needs advice
on
MongoDBMongoDBMySQLMySQL
and
PostgreSQLPostgreSQL

I'm planning to build a freelance marketplace website, using tools like Next.js, Firebase Authentication, Node.js, but I need to know which type of database is suitable with performance and powerful features. I'm trying to figure out what the best stack is for this project. If anyone has advice please, I’d love to hear more details. Thanks.

READ MORE
7 upvotes·137.5K views
Replies (3)
Meam Software Engineering Group·
Recommends
PostgreSQL

Postgres and MySQL are very similar, but Mongo has differences in terms of storage type and the CAP theorem. For your requirement, I prefer Postgres (or MySQL) over MongoDB. Mongo gives you no schema which is not always good. on the other hand, it is more common in NodeJS community, so you may find more articles about Node-Mongo stuff. I suggest to stay with RDBMS if possible.

READ MORE
9 upvotes·111.3K views
Recommends
MySQL
PostgreSQL

This is a little about experience. Postgresql is fine. You can use either the related table structure or the json table structure.

READ MORE
3 upvotes·104.6K views
View all (3)
Founder & CEO at Macombey·

Next.js is probably the most enjoyable React framework our team could have picked. The development is an extremely smooth process, the file structure is beautiful and organized, and the speed is no joke. Our work with Next.js comes out much faster than if it was built on pure React or frameworks alike. We were previously developing all of our projects in Meteor before making the switch. We left Meteor due to the slow compiler and website speed. We deploy all of our Next.js projects on Vercel.

READ MORE
13 upvotes·1 comment·397.1K views
Mentor Reka
Mentor Reka
·
August 27th 2020 at 1:30PM

Feeling exactly the same while working on the v3 of https://WeJob.ch with Next.js!!

·
Reply
Needs advice
on
FirebaseFirebaseNext.jsNext.js
and
TypeORMTypeORM

I am trying to figure out how to spin up effective React apps as fast as possible. I have loved my experience with using Next.js so far and have been using Next-Auth as an authentication process.

So far, I have used Django on the backend, but it looks like I can speed things up by ditching the backend and going serverless with the Next.js API routes. That means I am left with a database solution to figure out. Does anyone have experience using Firebase together with React, or alternatively using TypeORM with a PostgreSQL database?

I am valuing ease of development in this decision.

READ MORE
7 upvotes·44.8K views
Replies (2)
Software Engineer ·

React + Firebase is an awesome combination. Add Typescript and even better.

READ MORE
5 upvotes·1 comment·7.4K views
raphaelaudet
raphaelaudet
·
July 22nd 2021 at 8:11AM

Firebase will definitely be faster than typeorm. Typeorm seems pretty state of the art for js or ts stacks but I have been missing a lot of feat I got in other lang.

·
Reply
Technology Lead at Construyo·
Recommends
Firebase
Next.js

I am valuing ease of development in this decision.

Unless you have a hard requirement to server render the authenticated pages, and that your business domain and schemas are very well known and defined, I would advise you to completely ditch next-auth and server side code altogether, and use the client side authentication pattern with Firebase Web SDK.

The power of using Firebase SDKs are that you get an out of the box auth system, real-time data updates, offline writes, etc without writing a single line of backend code. Security is not a concern if you properly write the Firestore security and validation rules for your various use cases. Club it with Firestore and Auth triggers running on Cloud Functions and you already have a solid infrastructure to quickly pump out features. There is a solid react hook library for firebase react-firebase-hooks that would massively simplify your development and coding/maintenance efforts.

In future when your product matures and you get clarity around your business domains and have very well defined schemas, replace smaller parts of the system with individual apis, stricter schema based DBs (any SQL DB), microservices, etc as you scale.

To sum it up

  • Use Firebase Web SDK with hooks directly on the client side app in NextJS

  • Use Firebase Authentication for all your auth needs

  • Use Firestore for all your data needs

  • Add Firestore security/validation rules for read/write operations

READ MORE
4 upvotes·128 views