Niclas Berger Blog https://niclas.lol// Interesting articles about technical, financial and real life topics. Created with love for everyone. Sun, 23 Jul 2023 19:34:52 GMT https://validator.w3.org/feed/docs/rss2.html Feed for NextJS en All rights reserved 2023, Niclas Berger <![CDATA[A new approach to state? Introducing Legend-State for React]]> https://niclas.lol//posts/a-new-approach-to-state-legend-state a-new-approach-to-state-legend-state Fri, 21 Jul 2023 00:00:00 GMT Benchmark provided by [Krausest](https://github.com/krausest/js-framework-benchmark) ## How to use it? First, you need to install Legend State ```shell npm i @legendapp/state ``` Once it has been added to your project, you need to understand the main principle of Legend - observables. Imagine observables as a normal state, just like in React. You can modify the state with the provided `get()` and `set(...)` functions. ```javascript const state$ = observable({ message: "Hello world!" }) // Get the state with get() const message = state$.message.get() // "Hello world!" // Setting the state state$.message.set("New state") // Modifying the state state$.message.set(message => message + ' modified') ``` You now got the basic state set up. This state can now be observed. Legend provides an `onChange(...)`, `obervable(...)` and `wait(...)` function ```javascript const state$ = observable({ message: "Hello world!" }) // Using the onChange function to listen to the state directly state$.message.onChange(({ value }) => console.log('Message is "' + value + '"')) // This will re-run whenever accessed observables change observe(() => { console.log('Message is "' + state$.message.get() + '"') }) // when waits for a value to become truthy. await when(() => state$.message.get() === 'Not hello world!') // an observable can be computed based on other observables const notHelloWorld$ = observable(() => state$.message.get() === 'Not hello world!') ``` ## Example of using it with React ```javascript import { Memo, useObservable } from "@legendapp/state/react" function MemoExample() { const state$ = useObservable({ count: 0 }) useInterval(() => { state$.count.set(v => v + 1) }, 500) return (
// Memo re-renders itself when count changes
Count: {state$.count}
) } ``` Read more about it on their [React focused documentation](https://www.legendapp.com/open-source/state/react-introduction/). ## Summary Legend State is an amazing library and you should totally try it out for yourself. If you are interested in a more in-depth depscription of the library, go look at the [documentation of Legend State](https://www.legendapp.com/open-source/state/) ]]> me@niclas.lol (Niclas Berger) <![CDATA[The best CMS for NextJS]]> https://niclas.lol//posts/best-cms-for-nextjs best-cms-for-nextjs Mon, 24 Apr 2023 00:00:00 GMT [Suncel](https://suncel.io/) is a user-friendly CMS designed for simplicity. It offers a visual page builder with reusable components, making it ideal for small to medium-sized projects. With built-in SEO modules and localization capabilities, Suncel empowers developers to create SEO-friendly websites. One of its standout features is its generous pricing, which provides excellent value for money. However, it may lack some advanced features required for complex projects. **Pros:** - Simple and user-friendly interface - Visual page builder with reusable components - SEO-modules for better search engine visibility - Localization capabilities - Generous pricing, suitable for small to medium projects **Cons:** - May lack advanced features required for complex projects ## Prismic.io: Powerhouse for Developers and Marketers An image of the Prismic.io interface [Prismic.io](https://prismic.io/) is a robust CMS that offers a visual page builder through slices. This allows developers to build website sections with custom fields, providing immense flexibility. With excellent documentation and powerful features, Prismic.io caters to the needs of both developers and marketers/writers. Its pricing structure is also favorable, making it an attractive option. However, it may require some technical expertise to leverage its full potential. **Pros:** - Visual page builder via slices for developer customization - Great documentation for easy adoption - Powerful features for developers and marketers/writers - Competitive pricing **Cons:** - Requires some technical expertise to fully utilize its capabilities ## Ghost: Open Source and Feature-Rich An image of the Ghost interface [Ghost](https://ghost.org/) is an open-source CMS that offers a wide array of features, including paid posts, memberships, newsletters, and SEO capabilities. With its user-friendly page builder and headless architecture, Ghost is well-suited for team collaboration. It provides a classic WordPress interface, making it easily understandable for writers and marketers. However, it may become expensive when managing larger audiences. **Pros:** - Open-source CMS with a range of features - User-friendly page builder and headless architecture - Ideal for team collaboration - Suitable for writers and marketers - Extensible through plugins (e.g., newsletters) **Cons:** - May become costly when handling larger audiences ## WordPress: Affordable and Widely Used An image of the Wordpress interface [WordPress](https://wordpress.com/), a widely popular CMS, can be utilized for NextJS projects with the help of plugins like wpgraphql. It offers an affordable solution with a classic WordPress interface. WordPress is well-known for its team-friendly features and ease of use for writers and marketers. Its extendability through plugins, such as newsletters, enhances its functionality. However, it may require additional plugins and configurations for headless operation. **Pros:** - Affordable solution with a classic WordPress interface - Suitable for teams - Easy for writers and marketers to understand - Extendable through plugins (e.g., newsletters) **Cons:** - Requires additional plugins (e.g., wpgraphql) for headless operation ## Sanity.io: Collaboration and Developer Focus An image of the Sanity interface Sanity.io focuses on team collaboration and offers a great developer experience. With real-time collaboration features, it provides a seamless workflow for both developers and content creators. However, its interface may suffer from sluggish performance. While it offers generous usage quotas, the learning curve can be steep for newcomers. **Pros:** - Excellent for team collaboration - Great developer experience with real-time collaboration - Easy to use for writers and marketers - Generous usage quota **Cons:** - Interface performance can be slow - Steep learning curve for newcomers ## Strapi: Developer-Friendly and Self-Hostable An image of the Strapi interface [Strapi](https://strapi.io/) is an open-source CMS designed by developers for developers. It offers a great developer experience, backed by comprehensive documentation. With its self-hostable nature using Node.js, it provides complete control over the hosting environment. Strapi Cloud also offers cloud hosting for those seeking a managed solution. Additionally, its intuitive interface adds to its appeal. However, it may not be the best choice for non-technical users. **Pros:** - Open-source CMS designed for developers - Excellent developer experience with extensive documentation - Self-hostable using Node.js - Cloud hosting available through Strapi Cloud - Intuitive interface **Cons:** - May not be the most user-friendly option for non-technical users In conclusion, when selecting a CMS for your NextJS project, consider the specific needs and requirements of your project. No single CMS can cater to every scenario, but by exploring the strengths and weaknesses of these popular options like Suncel, Prismic.io, Ghost, WordPress, Sanity.io, and Strapi, you can make an informed decision. Whether you prioritize simplicity, advanced features, collaboration, or developer friendliness, there's a CMS that can be tailored to your needs.]]> me@niclas.lol (Niclas Berger) <![CDATA[How to setup Next.js 13 with Docker: A Seamless Integration]]> https://niclas.lol//posts/how-to-setup-docker-with-nextjs how-to-setup-docker-with-nextjs Tue, 18 Jul 2023 00:00:00 GMT me@niclas.lol (Niclas Berger) <![CDATA[Introduction into SQL: The basics]]> https://niclas.lol//posts/introduction-into-sql-the-basics introduction-into-sql-the-basics Fri, 24 Dec 2021 00:00:00 GMT me@niclas.lol (Niclas Berger)