Next.js

This repo contains all of the code artefacts from following along with the tutorials on nextjs.org.

The tutorials were not really designed to be done in the same repo, so the base directories for each need to be alterered if they are to be deployed.

React Foundations ✅

1. About React and Next.js (theory - no code)
2. Rendering User Interfaces (UI) (theory - no code)
3. Updating UI with JavaScript (theory - no code)
4. Getting Started with React ♻️
5. Building UI with Components ♻️
6. Displaying Data with Props ♻️
7. Adding Interactivity with State ♻️
8. From React to Next.js ♻️
9. Installing Next.js ♻️
10. Server and Client Components ♻️

App Router ✅

Part of this tutorial was to deploy it out to vercel. It was very slick.I took the liberty of putting it on a custom domain and you can find it there 👉 next-js-dashboard.curle.io

To login, use

user@nextmail.com
123456

1. Getting Started ♻️
2. CSS Styling ♻️
3. Optimizing Fonts and Images ♻️
4. Creating Layouts and Pages ♻️
5. Navigating Between Pages ♻️
6. Setting Up Your Database ♻️
7. Fetching Data ♻️
8. Static and Dynamic Rendering ♻️
9. Streaming ♻️
10. Partial Prerendering ✅ (no code, theory / beta functionality)
11. Adding Search and Pagination ♻️
12. Mutating Data️ ♻️
13. Handling Errors ♻️
14. Improving Accessibility ♻️
15. Adding Authentication ♻️
16. Adding Metadata ♻️

SEO 📋

When I come back to this, SEO is next.

1. Why is SEO so important?
2. Search Systems
3. What are Web Crawlers?
4. Crawling and Indexing
5. What are HTTP Status Codes?
6. What is a robots.txt File?
7. XML Sitemaps
8. Special Meta Tags for Search Engines
9. What are Canonical Tags?
10. Rendering and Ranking
11. Rendering Strategies
12. What about AMP?
13. URL Structure
14. Metadata
15. On Page SEO
16. Web Performance & Core Web Vitals
17. Web Vitals Overview
18. Largest Contentful Paint (LCP)
19. First Input Delay (FID)
20. Cumulative Layout Shift (CLS)
21. SEO Impact
22. Improving your Core Web Vitals
23. Introducing Lighthouse
24. Automatic Image Optimization
25. Dynamic Imports
26. Dynamic Imports for Components
27. Optimizing Fonts
28. Optimizing Third-Party Scripts
29. Monitoring your Core Web Vitals
30. Next.js Speed Insights
31. Custom Reporting
32. Other Tools
33. Data Studio (Chrome User Experience Report)

Pages Router 📋

This one will the last one I do. Pages Router is the older approach and I think I'm only likely to come accross that if I'm working on an older project.

1. Set up a new Next.js app
2. Welcome to Next.js
3. Editing the Page
4. Navigate Between Pages
5. Set up pages
6. Pages in Next.js
7. Link Component
8. Client-Side Navigation
9. Layout Component
10. Assets, Metadata, and CSS
11. Setup
12. Assets
13. Metadata
14. Third-Party JavaScript
15. CSS Styling
16. Global Styles
17. Polishing Layout
18. Styling Tips
19. Creating a simple blog architecture
20. Pre-rendering and Data Fetching
21. Static Generation
22. Server-side Rendering
23. Combining Pre-rendering and Client-side Rendering
24. Static Generation with and without Data
25. Implement getStaticProps
26. getStaticProps Details
27. Fetching Data at Request Time
28. Dynamic Routes
29. Set up
30. Page Path Depends on External Data
31. Implement getStaticPaths
32. Implement getStaticProps
33. Render Markdown
34. Polishing the Post Page
35. Polishing the Index Page
36. Dynamic Routes Details
37. API Routes
38. Set up
39. Creating API Routes
40. API Routes Details
41. Deploying Your Next.js App
42. Set up
43. Push to GitHub