Testinha: I built an app with AI in a week. And I still needed my dev skills
2 min readHow I built Testinha, a Heads Up-style party game, in six days with AI, Cursor, Figma and Expo, and where I still had to do the developer's work myself.
Blog
Getting Started with Next.js
Nov 12, 2021
Hello dev!
The goal of this post is to explain a little bit about what Next.js is and what we can do with it.
What is Next.js?
It’s 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.
Advantages
Next.js has several tools to help you, some of them:
Image optimization: With Next.js we can replace the <img src="" /> tag with the <Image src="" /> component, which brings a variety of optimizations such as loading only the size that’s needed, and only when the image is actually used.
Next.js Analytics: When you deploy your app on Vercel you get access to a real-time analytics tool, so you can measure the number of visitors, page load time, and more.
Zero Config: With a single terminal command, a ready-to-go project structure is created.
CSS and CSS Modules support: CSS Modules let us scope our CSS to avoid collisions.
Routing: Navigating between pages is very simple: just create a new file named after the page you want and the router recognizes it as a page.
API Routes: With routes you can create endpoints that return information to your app.
Hybrid SSG and SSR: SSR (Server Side Render):
When we request a user profile page, for example, the server performs the necessary lookups in the application and database, and returns ready-to-display HTML to the browser.
Source: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/ (in Portuguese)
- SSG (Static Site Generator):
These are sites without dynamic content, such as a company’s presentation page.
Source: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/ (in Portuguese)
How to learn Next.js
The Next.js site itself (https://nextjs.org/learn/basics/create-nextjs-app) has an interactive course covering the fundamentals of Next.js, how to monitor performance, SEO and other features.
References
Nextjs.org What’s the difference between SSR and SSG (in Portuguese)
Other Posts
I just launched V2 of my project 'Who's That Pokémon?'
2 min readI launched V2 of the game 'Who's That Pokémon?': why I built it, the tech I used (Expo Router, GraphQL, Jotai and Biome) and my impressions.
Websites, Newsletters and Podcasts Every Dev Should Know
2 min readMy list of websites, newsletters and podcasts for devs who want to stay up to date, including InfoQ, dev.to, JavaScript Weekly and Hipsters Ponto Tech.