Nov 20

Chapter 9 Streaming

Topics Covered

• What is streaming and when you might use it.

• How to impolement stream with loading.tsx and suspense

• What loading skeltons are

• What route groups are, and when you might use them.

• Where to place Suspense boundires in your application

• FOCUS ON DESIGN PATTERNS

• Key design principles when workign with Next.js:

Component-Based Architecture: Embrace React's component-based approach. Break your UI into reusable components that encapsulate specific functionality or user interface elements. This promotes code reusability and maintainability.

Page-Based Routing: Next.js provides automatic route handling based on file structure. Create pages by placing React components inside the pages directory. Each component in this directory corresponds to a route.

Layout Components: Use layout components to define the overall structure of your pages. These components can include headers, footers, navigation bars, or any elements that should appear on multiple pages. Layout components help maintain a consistent user interface.

Data Fetching: Decide where and how to fetch data for your pages. Next.js offers various data fetching methods, such as getServerSideProps, getStaticProps, and useSWR. Choose the appropriate method based on your data requirements.

CSS and Styling: Choose a styling approach that works for you, such as CSS-in-JS libraries like styled-components, CSS modules, or utility-first CSS frameworks like Tailwind CSS. Keep styles organized and scoped to components.

State Management: Depending on your application's complexity, choose an appropriate state management solution. React's built-in useState and useContext can handle simple state, while more complex apps may benefit from libraries like Redux or Zustand.

Folder Structure: Organize your project into a logical folder structure. For example, have separate folders for components, pages, styles, assets, utilities, and API routes. A clear structure makes it easier to locate and manage files.

API Routes: Use Next.js API routes to handle server-side logic and create RESTful or GraphQL APIs. Keep API routes organized in a dedicated folder, such as /pages/api.

Error Handling: Implement proper error handling mechanisms, including error boundaries and error messages, to improve user experience and help with debugging.

Testing: Write tests for your components and pages to ensure they work as expected. Tools like Jest and Testing Library are commonly used for testing React applications.

Code Splitting: Leverage Next.js's automatic code splitting to optimize page loading performance. It only loads JavaScript necessary for the current page, reducing initial load times.

Optimization: Implement optimizations like image optimization, lazy loading, and server-side rendering (SSR) when necessary to improve page load speed and SEO.

Deployment: Choose a suitable hosting platform for your Next.js app. Vercel, Netlify, and AWS are popular options. Configure deployment settings and continuous integration (CI) pipelines for seamless updates.

Documentation: Maintain clear and up-to-date documentation for your project, including how to run it locally, its structure, and any custom configurations.

Version Control: Use Git for version control and follow Git best practices to track changes and collaborate with others effectively.

By adhering to these design principles and structures, you can create well-organized, maintainable, and scalable Next.js applications that are easier to develop, debug, and extend.

Project MAL clone

• Start with a minimal viable product (MVP) focusing on core functionality like browsing anime and managing favorite allow you to launch app quickly, and star gathering valuable user feedback. Which will guide your future development. Ensuring that you are building feature that user actually want and need.

Nov 20

Next.js Review

• Styling: Different ways to style your aplication in Next.js
• Optimizations: Images, links, and fonts
• Routing: How to create nested layouts and pages usign file-system routing.
• Data Fetching: Setting up a database on Vercel and the best practices for fetching and streaming.
• Search and Pagination

My thoughts on the job market and the ecosystem right now.

• Positives and Negatives about coding.

So many different ways to construct things, whats more efficent whats the best this. But because of this it is always ever evoloving. Now so quickly that AI can code, but in a sense that its more about knowing what to do with that code. Or utilizing it in the correct way. Solving problems, which require data and analysis to quickly fix that problem.

My timeline in learning with React Informatica Powercenter

• ETL tool that I didnt really like doing nor learning about.

Learned HTML from youtube tutorial hell, made stuff the most basic things, like landing pages, which were probally terible.