This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
- Asyncronism
- Fetch: see file fetch.tsx from functions folder, and page.tsx file to view how to apply that Learnings
- Dark mode: how to set a button which change the entire page to light mode to dark mode. In tailwind.config.ts, set darkmode: "class", then, in tag html put a class called dark. Dark class works like a breakpoint but this "breakpoint" (dark) works when user clicked a button. In this case, user can click in the moon icon
- Tailwind don´t recognize js validations. To validate we can use clsx library. To view how to use clsx to validate, view darkMode.tsx file into functions folder.
- We can use normal css with Tailwind, but tags like breakpoints (sm, md, etc) don´t recongize personalized classes. Instead we have to create traditional breakpoints css. To see that, please view global.css file, in this file there is a class called manualGrid. this class has their own breakpoints made with css normal.
- How to set favicon: put in the root folder (app) a favicon and in layout.tsx folder (the root layout) add a head tag and link a favicon.
- @apply directive to group all tailwind classes used in a certain tag. See global.css file.
- Display grid: Featured income section has a display grid. in large screens we used grid-template-rows, grid-template-columns and grig-template-areas.
- Global css: we can use this file to create a entire design system into this file.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.