Next.js Blog

the biggest thing is native html is a pain to make non-trivial websites with. JSX, via react, provides a nice modular abstraction layer that easier to write and manage vs a blob of html and raw js files. Of course if web components, I haven't really looked into them, provide a similar level of abstraction, thats great. If not people will end up (mis)using React and co because it's easier from a developer experience point of view. There are alternatives of course. Astro [1] produces native, static html from JSX. Deno has Fresh [2], which offers a similar thing in the Deno ecosystem. Next.js [3] has static html option, but last time I tried it, it wasn't as nice as Astro or Fresh in this particular area. [1]: https://astro.build/ [2]: https://fresh.deno.dev/ [3]: https://nextjs.org/

As Next ambiguously puts it: "The React Framework for Production" [0] It's excellent for building page-based sites and apps and comes with lots of nifty features that just seem to work. And, the most part, it's just out of your way. Regarding the ideal use, I'd say any project that benefits greatly from (partially) pre-rendered content and statically generated pages is best served by Next and its data fetching [1]. I can't think of a FE-based solution that is anywhere near as good. It's also the only sane way to work with the insanity that is JAM stack [2]. Whatever you do, it's a safe bet. 0 - https://nextjs.org 1 - https://nextjs.org/docs/basic-features/data-fetching 2 - https://jamstack.org

Hi, OP here. I made this little tool in a few hours to play with SSS, for an upcoming interactive article on end-to-end encryption. It uses the @stablelib/tss NPM package to do the heavy lifting. The UI is made with ChakraUI [1] & Next.js [1], source on GitHub [2]. [1] https://chakra-ui.com [2] https://nextjs.org [3] https://github.com/franky47/francoisbest.com

My go-to are Next.js (https://nextjs.org/) and Hasura (https://hasura.io/). Graphql has a bit of a learning curve if you haven't worked with it, but those two tools deliver a pretty amazing developer experience. Next.js is react + ssr + routing and more. Hasura exposes an auto-generated graphql API in front of a postgres instance, with hooks for auth/authz and much more.

This is a great learning project for patterns & Best practices on so many aspects TypeORM, Hooks, React, NO-Redux ... as the Author mentioned already. I am recently using a Next & Nest combination, Combining some of the good patterns of this project with Next&Nest combination would be great. Here is a good Next/NEST starter project https://github.com/saltyshiomix/ark https://nestjs.com/ https://nextjs.org/

Personally, I would use Next.js. It allows you have dynamic pages (e.g. your app) alongside static pages (e.g. landing page). Since it's server-side rendered, it's great for SEO. You mentioned you don't want to do SPA+SSR. With static pre-rendering from Next.js, there isn't a SPA. It's a fully static site. You also mentioned having multiple pages. Rather than dealing with React Router or other SPA approaches, Next has a `/pages` directory where each file nested inside maps to a route. So `pages/about.js` is /about. It's similar to PHP in that regard. If you don't need CMS, then you don't need Wordpress. For hosting, I would recommend Zeit's Now. They're also the creators of Next.js, so the tech pairs well together. It's as simple as `npx create-next-app` to make the app and then `now` to deploy. https://nextjs.org/ https://zeit.co/home

Elixir + Phoenix sound like a great stack. I've been building a side-project with that stack and it has been a joy. With that being said, I believe it might be quite a learning curve for you. Not because it will be difficult, but just because there might be many topics at once to learn. Like you said, GraphQL, Postgres, Elixir (and a little bit about the BEAM ecosystem), Phoenix and CouchDB. If you are doing anything for the Web, you will inevitably touch JavaScript as well. Not sure if you are open for suggestions, but one thing you could consider would be using JavaScript or TypeScript with NodeJS. I'm not the biggest fan, but you would be able to use the same programming language in the frontend for our Web app and also the backend with NodeJS and a full-stack framework like Remix[1] or NextJS[2] This could reduce the overhead to start your side-project and will give you fewer puzzle parts to learn and put together. [1] Remix: https://remix.run/ [2] NextJS: https://nextjs.org/

If you already know Python don’t go with something like JavaScript: The Definitive Guide and just go for some basic tutorials. JavaScript is a tiny language with nearly any base library at all. You should be able to get learn the basic syntax quickly. Stay away from TypeScript unless you come from Java when learning. You can look at it later once you’ve got your own bearing. I would also recommend Next.js as frontend framework. It is React and WebPack based, you can get started quickly and what you learn from it can be applied to other projects. For the backend just install Node.js (you will need it anyway) maybe look for NVM if you are on mac or linux or nvm-windows if you are on windows. Once you feel somewhat comfortable with with the syntax you can take a look at eloquent javascript. The book is online, if you like it you can support the author by buying the book but you don’t have to. Small tip, if you know programming already books like “The Definitive Guide” are not good for learning something new. Giant tombs like that are interesting when you are a total noob, at any other time they will just slow you down when you are trying to get into a new language. Some of those tombs can be interesting once you get well acquainted with a language and might need to look up edge cases but you are not there yet. Hope this helps and have fun. https://nextjs.org/ https://developer.mozilla.org/en-US/docs/Web/JavaScript https://eloquentjavascript.net/

Vue/React is moving heavily into SSR which is the future of web development IMO (37signals called it long ago). It's the best of both worlds of old staticy HTML + interactive components. I used to look down on something like Next.js/Nuxt.js [1] for simple (and advanced) websites until I used it and I'm 100% convinced it's the future of web development. Where most of the content is built with components but pre-rendered server-side and the JS loads to 'hydrate' the interface with interactive elements. I've stopped using heavy frameworks like Phoenix as a result and switching to simpler backends APIs written in Rust/Ruby/etc with Vue SRR handling the full frontend. Combined with treeshaking, chunked JS via webpack (which automatically only renders tiny .js files on-demand based on what components the page/route needs), purgeCSS which removes all unused CSS, PWA/critical inlined CSS tools, and other easy-to-use optimizations you can have a fully feature-rich JS site with SEO-friendly HTML pages and very fast page loads. We're just seeing the beginning of Vue/React and it's going to improve the web from the ills of the past, not make it worse. Better performance and more importantly high-quality well composed codebases, plus TypeScript which helps JS applications scale in size while keeping them sane. [1] https://nextjs.org / http://nuxtjs.org/

This is similar to my own experiences. During the past decade the JavaScript ecosystem had to evolve and adapt to handle increasingly more advanced requirements. Multiple tools and libraries rose up to meet the challenge, and the best ones have slowly floated to the top. It's not like the winning tools are even that recent: I think Webpack was already around before 2012, TypeScript was released in 2012, and, if I remember correctly, React was released around 2013. Fun fact: babel was called 6to5 when it was initially released. Webpack can sometimes be difficult to configure because the problems which it sets out to solve are also complicated. To be fair, their old docs were quite lackluster, and the creator's coding style was uncommon, which made reading through the source a bit challenging. I know a lot of people are critical of Webpack, but I was overjoyed when I first discovered it, as it enabled me to correctly solve a huge number of issues. Once adopted, it let me drastically simplify our build pipeline, as well as our development and testing environments. I can sympathize with non-frontend developers because I also feel overwhelmed sometimes when I look at all the tooling related to backend / devops / infrastructure stuff. But I understand people build and use these tools because they're usually solving fairly complex real-world problems. I suspect that many people that complain about JavaScript don't care much about the frontend and they just want to get it out of…

These days you shouldn't use a monolithic architecture IMHO, you should consider creating services or microservices with Node.js to provide API's to a "headless" frontend. Depending on your "workloads" you can start simple with just API's to support your frontends, and then expand your architecture to include services for other services. You would need to consider whether you need caches (redis) or databases (postgresql, mongodb, etc). All these can be containerised as well. There are also frameworks such as next.js and nuxt.js which can ease the server side rendering side of things, depending on your choice of frontend view library (React/Vue). In terms of orchestration and deployment, consider building your services with a Dockerfile. I've had some success for personal projects using something like Rancher (1.x) for easier orchestration and scaling of containers. But at some stage you might want to learn how to use Kubernetes, since it seems to be the in thing now for container orchestration, scheduling, etc. Rancher allowed me to manage hosts and clusters on multiple cloud providers once I had the Rancher manager node setup. So it can vary from case to case, depending on what your app actually does, you could still use koa+sequelize + passport for your API's. The above are just my own suggestions. If you choose to go down the serverless road I would recommend checking out the Serverless framework, which can help you with deving as well as deploying to your cloud…

Heard and appreciate the feedback. We’re well aware of the DX papercuts in Middleware. With 15.5 we made a big step in supporting Node runtime[1] which addresses a slew of issues people have reported over time. If I went back in time, I would have called it Routing Middleware or Routing Handler. A specific hook to intercept during the routing phase, which can be delivered to the CDN edge for specialized providers. It’s also a somewhat advanced escape hatch. Since OP mentions logging, it’s worth noting that for instrumentation and observability we’ve embraced OpenTelemetry and have an instrumentation.ts convention[2] [1] https://nextjs.org/blog/next-15-5#nodejs-middleware-stable [2] https://nextjs.org/docs/app/api-reference/file-conventions/instrumenta…

Yes, pure old school SPAs have at least one additional roundtrip on the first visit of the site: 1. Fetch index.html 2. Fetch js, css and other assets 3. Load personalized data (json) But usually step 1 and 2 are served from a cdn, so very fast. On subsequent requests, 1 and 2 are usually served from the browser cache, so extremely fast. SSR is usually not faster. Most often slower. You can check yourself in your browser dev tools (network tab): SPA: https://www.solidjs.com/ vs. Poster child SSR: https://nextjs.org/ So much complexity and effort in the nextjs app, but so much slower.

I haven't really followed Next.js and the related ecosystem closely, what does this project do exactly? If I look at Next.js docs [0], they have three options for self-hosting: using a Node server, using a Docker container or as an SPA. Is this project a wrapper around one of those or is it something else entirely? Or to perhaps ask differently, to me it seems you can already self-host Next.js, what's the value add of this specific project? [0] https://nextjs.org/docs/pages/building-your-application/deploying#self…

Hi folks. The team at Vercel has a great guide for migrating CRA to Next.js manually (https://nextjs.org/docs/app/building-your-application/upgrading/from-c… We converted this guide to STEP so that you can run it as an AI agent automation on Second (https://www.second.dev/).

Next.js - https://nextjs.org/ React framework - 20 million NPM downloads a month () https://moiva.io/?npm=next

Incremental builds exist, so you'd really only have to build once: https://nextjs.org/docs/pages/building-your-application/data-fetching/… That said, personally, I love PG and enjoy using a DB. But I can see pro's to both sides.

Always has been. I think that you do need interactivity through JavaScript at some point. And I find react and similar easier to maintain than an HTML/JS soup generated by PHP, JSP, or RoR. I would take a look at https://fresh.deno.dev/ or https://kit.svelte.dev/ or https://nextjs.org/

Start with Nuxt / Next and work your way to HTML. I say this after being a web developer since 2002. You will figure out what you need and what you do not very quickly this way. It won't be easy, but you'll end up with the skills you need in modern web dev. And be thankful you did not have to spend a decade dealing with cross browser issues. You have it very easy today. https://nuxtjs.org/ (I prefer Vue). https://nextjs.org/

If you're learning React, you shouldn't let yourself get bogged down all the JS toolings, build tools, etc. It can all be quite overwhelming, and the best way to learn a new topic it to learn it in isolation before bringing those concepts into the big picture. You can get started with this right away, simply type `react.new` into any browser and it will bring up a brand new, ready to go codesandbox in which you can write code, see your changes update live, save your drafts, and eventually download your code and run it direct on your machine. Even as an experienced React dev, I still spin these up all the time for little experiments and proofs. Once you're ready to actually build a website, you'll probably want to start with an established framework like NextJS[0]. 0: https://nextjs.org/docs

Though it's worth keeping in mind that Next's next big structural update [1] is pretty much an attempt to assimilate some of the basic concepts of Remix wholesale. [1]: https://nextjs.org/blog/layouts-rfc

Not exactly your question, but since you are using NextJS I highly recommend you use its API route[0] support to proxy your backend API calls, which allows you to avoid exposing auth tokens, etc to client web front end [0] https://nextjs.org/docs/api-routes/introduction

Where is Vercel's cloud functions running? How do they compare to AWS Lambda/Edge? The documentation on https://nextjs.org/learn/basics/api-routes/api-routes-details seems quite sparse. I see basic routing and middleware but seems nowhere near as many features as other frameworks. I see it's great for building an MVP but may not be a good fit outside of startups. Nevertheless, its the front-end and server side rendering is quite interesting to me. What are some problems with this setup? Might have a go just for the frontend portion but seems to good to be true in some aspects.

Next.js recommends delivering static assets by default and is geared towards that. > We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request. If you need dynamic content, they recommend server-side rendering, and lastly client-side rendering only if the page is unaffected by SEO and requires a lot of in-page updates. https://nextjs.org/learn/basics/data-fetching/two-forms

Not exactly correct or incorrect. Some projects built as a single page app (SPA), using a fancy framework like React or Angular with little configuration, end up loading all DOM content client side via javascript which has a number of drawbacks on performance and SEO. It doesn't have to be that way though. If you want to use React, there are tools to help you easily make something like a static site generator (SSG) which will transform your React code down into pre-rendered HTML pages. Two popular ones are Gatsby (https://gatsby.dev/) and Next.js (https://nextjs.org/) which also supports Server Side Rendering (SSR). So out of the box plain HTML / CSS might be more optimized than a fresh create-react-app repo, but if you prefer to use the toolset provided by React to build your site (or Vue or Angular, etc), there are plenty of options to make that equally performant.

I Really wanted a daily game, with emoji sharing, that I could play with the family members that don't enjoy word games. So I made one myself. Built with Chakra UI - https://chakra-ui.com and Next.js - https://nextjs.org

Huge fan of statically generated pages. We statically generate all our pages at Levels.fyi. Another benefit is that static websites are also great for SEO. Cool to see a lot more adoption and progress around the tech here. For example, once you reach tens of thousands of generated pages it can get a bit hard to maintain, but tools such as Next's incremental static regeneration make things a bit easier: https://nextjs.org/docs/basic-features/data-fetching/incremental-stati…

Next¹ offers a more fleshed out framework with far less boilerplate for both client and server code. Server side, Nest² offers much of the same. Think Angular but for backend dev. Yes, it has some boilerplate to it but for the most part, its CLI eases redundant typing. [1] https://nextjs.org/ [2] https://nestjs.com/

That's exactly what Next.js is: https://nextjs.org (as well as a few other tools in the ecosystem)

I find it funny that even though it's been reported a number of times, the NextJS routing system is still flawed Try it on their own site: https://nextjs.org/index Resulting in duplicate content to https://nextjs.org/ Maybe duplicate content isn't a problem with modern SEO - but it's a problem for my workflow and is potentially one reason why NextJS won't be on my list for any new projects.