From bf23be9d7868a0c4b9eb88ed52d08a515ed7ffcf Mon Sep 17 00:00:00 2001 From: Monika_HackBuddy Date: Sun, 20 Jun 2021 06:12:06 -0700 Subject: [PATCH] Next.js notes --- Next.js Conf.md | 106 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 Next.js Conf.md diff --git a/Next.js Conf.md b/Next.js Conf.md new file mode 100644 index 0000000..e93919c --- /dev/null +++ b/Next.js Conf.md @@ -0,0 +1,106 @@ +# Next.js Conf + +Next.js is a React Framework for Production. + +> "Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed." + +The "Next.js Conf" took place online on June 15, 2021 from 9am up to 10:30am PT. The most important topics at a high level that were talked about were: Next.js used in ecommerce, the Next.js version 11 and specifically about Next.js Live. + +This conf was mainly for commercial presentation of the of the product - the good aspects and advantages that it can provide to a certain project. + +- **Guillermo Rauch** - CEO at Vercel + + #### [Twitter](https://twitter.com/rauchg?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) + + #### [LinkedIn](https://www.linkedin.com/in/guillermo-rauch-b834b917b) + + #### [GitHub](https://github.com/rauchg) + + #### [Website](https://rauchg.com/) + + #### _Topic Discussed:_ About the usage of Next.js and that in six months its usage increased by 15%. It was also discussed that no matter what we produce (static or dynamic), Next.js is hybrid. This framework provides a real time feedback for the developer experience. Other topics mentioned here are Next.js 11 and Next.js Live - that have very fast privew while making changes. The big thing about the Next.js Live is the toolbar for live changes. All the changes and comments made from everyone involved are displayed on the live privew on the web. The interaction between the users is huge (fast and easy). + + > "Next. js Live works perfectly, even when offline, eliminating the need to run or operate remote virtual machines." + +- **Lydia Hallie** - Software Engineering Contractor at The Avocoder + + #### [Twitter](https://twitter.com/lydiahallie?lang=en) + + #### [LinkedIn](https://www.linkedin.com/in/lydia-hallie) + + #### [GitHub](https://github.com/lydiahallie) + + #### [Website](https://www.theavocoder.com/) + + ### [Instagram](https://www.instagram.com/theavocoder/?hl=en) + + #### _Topic Discussed:_ It was discussed how the user can deal with images (large files) and that there are components to make fast load on them. While coding, the user can set up image place which is blurred at first and afterwards it sharpens. For the developers to achieve something, the framework must work (rules and checks). + + > Better developer experience leads to better user experience. + +- **Shubhie Panicker** - Tech Lead Manager, Web Platform - Google + + #### [LinkedIn](https://www.linkedin.com/in/shubhie-panicker-b704653/) + + #### [Twitter](https://twitter.com/shubhie?lang=en) + + #### [Website](https://www.shubhie.com/) + + #### [web.dev](https://web.dev/authors/shubhie/) + + #### _Topic Discussed:_ Next.js frameworks are used in Google for Google Search, Image Search, Google Maps, Google Photos. These apps push the boundaries to the Web. The most important thing for developers to have a quality app, framework must participate and do the heavy lifting. Today at Google they work with the following frameworks: Next.js, Nuxt.js and Angular. The open source eco system enables modern apps to be build for the web with great experience. + + > "nextjs.org/11 is a system that provides solutions to support optimum loading." + +- **Houssein Djirdeh** - Developer Advocate at Google + + #### [LinkedIn](https://www.linkedin.com/in/housseindjirdeh/) + + #### [Twitter](https://twitter.com/hdjirdeh?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) + + #### [Website](https://houssein.me/) + + #### [GitHub](https://github.com/housseindjirdeh) + + #### [web.dev](https://web.dev/authors/houssein/) + + #### [Amazon](https://www.amazon.com/Houssein-Djirdeh/e/B0823578VX%3Fref=dbs_a_mng_rwt_scns_share) + + #### _Topic Discussed:_ It was discussed about the smooth transitions between pages that this framework makes possible. Also about the script component for optimum loading (before interactive, after interactive - tag manager, lazy on load) to make beautiful UX. Loading web fonts on Next.js - custom font automatically load, and very fast load on the font styles (Google fonts and Adobe fonts). + + #### This framework was the missing piece for making web to thrive. + +- **Tim Neutkens** - Owner at Tim Neutkens Development + + #### [Twitter](https://twitter.com/timneutkens) + + #### [GitHub](https://github.com/timneutkens) + + ### [LinkedIn](https://www.linkedin.com/in/tim-neutkens-5a6733168/?originalSubdomain=nl) + +- **Alex Castle** - Software Engineer at Google + + #### [Twitter](https://twitter.com/atcastle) + + #### [GitHub](https://github.com/atcastle) + + ### [LinkedIn](hhttps://www.linkedin.com/in/atcastle/) + +## Questions + +The final part of the Next.js Conf was about questions from the audience on Discord. + +- Can <"image"> tag be used for optimizing background image? +- How Next.js Angular and other frameworks (tools) work with Google? +- Do you plan to use React 18 at SSR? +- Questions for the speakers for the intro video and how it was made. +- How to customize [Conformance](https://web.dev/conformance/) - modifying the loading performance? +- What to expect on the next Next.js Conf in fall 2021? - The answer was that new stuff are coming, but no specific agenda at the moment. +- Create React app (migration script) +- Blurry place holder - image component from next.js used at Vercel for making a better performance. +- How next.js/live saves the code we edit? - Local first at web browser and it's a live presentation at other people's web browsers (local development to collaboration). +- APIs at Next.js - CMS, Headless, how to debug? +- Does the image component have the ability to add a custom image placeholder, or does it just use a blurred image? +- How do these new tags and optimizations affect Google SEO? https://web.dev/vitals/ +- CSS in lining at Next.js +- I18N routing