The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

When selecting a framework for your web application, it is critical to consider the developer experience that they provide. Astro, Remix, and Next.js both build on top of React to provide a more streamlined experience. They both have a low learning curve, so if you're already familiar with React, you can quickly pick them up and get started. 

We evaluate each to help you decide which framework is appropriate for you, not to determine which is faster or better.

## What is Astro?

[Astro](https://astro.build/) is a modern web framework built on React and a static site builder that requires little or no JavaScript to deliver lightning-fast, high-performance websites with a modern developer experience. It allows you to create websites using UI components from your favorite JavaScript UI frameworks such as React, Svelte, Vue, and others.

Astro websites are entirely static, with no JavaScript code whatsoever. When a component (for example, image carousels, dark and light mode) requires JavaScript code to run, Astro only loads that component and any necessary dependencies. The rest of the site is still static lightweight HTML. Check out Astro's getting started tutorial for an excellent introduction to the game.

- Astro is more flexible: you can build UI with any popular component library (React, Preact, Vue, Svelte, Solid, and others) or Astro's HTML-like component syntax, similar to HTML + JSX.
- Astro can build statically via SSG or deploy to SSR environments via adapters: Deno, Vercel serverless, Netlify serverless, and Node.js, with more to come.

## What is Next.js?

[Next.js](https://nextjs.org/) is an open-source React framework for quickly creating server-rendered React applications. It adds structure and features and handles the React tooling and configuration required for your application.

It can be used to solve common application requirements like routing, data retrieval, and integrations. Next.js was created to provide an easy-to-use development framework that would reduce the time and effort required to develop full-fledged, SSR-friendly web applications while improving the end user and developer experience. The [documentation](https://nextjs.org/docs) is a great place to start if you want to start with this framework.

## What is Remix?

[Remix](https://remix.run/) is an edge native, full-stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product. (according to the official website remix.run)

## Key Features

### Astro

- **Zero-config:** Any config explained will be handled by our **`astro add`** CLI command (i.e., add Svelte support with **`astro add svelte`**).
- **Astro is UI-agnostic:** meaning you can Bring Your Own UI Framework (BYOF).
- **Easy to use:** Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or experience with web development.
- **Fast by default:** An Astro website can load 40% faster with 90% less JavaScript than the site built with the most popular React web framework.
- **Server-first:** Astro leverages server-side rendering over client-side rendering as much as possible
- **Content-based:** Astro’s unique focus on content lets Astro make tradeoffs and deliver unmatched performance features that wouldn’t make sense for more application-focused web frameworks to implement.
- **Fully-featured but flexible:** Astro is an all-in-one web framework with everything you need to build a website. Astro includes a component syntax, file-based routing, asset handling, a build process, bundling, optimizations, data fetching, and more. You can build great websites without ever reaching outside of Astro’s core feature set.

### Remix

- **Routes:** Like other frameworks, Remix allows developers to manage the different routes of their web projects using JavaScript/TypeScript files that contain handler functions. We can generate routes on our website to create files that follow the file system hierarchy of our projects, creating analog URLs for our pages. Remix routes work using the partial routing feature provided by React-Router.
- **Nested components:** Remix allows you to manage nested pages and components. We can create a file to handle a certain route and, at the same level in the file system, a folder with the same name. All the files we create inside that folder will be nested components of the parent route instead of different pages.
- **Error Handling:** Nested components bring another benefit: if an error occurs while rendering a certain component, it doesn't affect the other nested parts of the page.
- **Forms:** As Remix focuses on web standards, it uses native methods **(POST, PUT, DELETE, PATCH)** to handle forms instead of using JavaScript for that.
- **Loaders and Actions:** Remix provides two different types of functions to create server-side dynamic content. The loader functions handle GET HTTP requests in the server, mainly used to get data from different sources.

### Next

- ****Async Components & Data Fetching:**** Async components are a new technique for obtaining data for server-rendered components introduced in Next.js 13. We can render async components using Promises with async and await.
- **React Server Components:** Server components enable us to execute and render React components on the server side, resulting in faster delivery, a smaller JavaScript bundle, and lower client-side rendering costs.
- **`app/` Directory for File-Based Routing(Beta):** Routes can be specified using the structure of your project directory. Simply place an entry point in the `pages` directory and create a new route.
- **Lightning Fast Bundling:** Introduced with Next.js 13 is a new JavaScript bundler, [Turbopack](https://turbo.build/pack) billed as the “successor to Webpack.” Be aware that Turbopack is currently in alpha and not production ready.
- **Built-in CSS and Sass support**: Support for any CSS-in-JS library
- **Static Exports**: Next.js allows you to export a fully static site from your app using the next export command.

## Hydration

Hydration is a client-side JavaScript technique for converting a static HTML page into a dynamic page. This provides a pleasant user experience by displaying a rendered component on the page but with attached event handlers. Hydration occurs before user interaction on static pages. The user experience suffers as a result.

### Astro

Astro handles this through a method known as partial hydration. The method of loading individual components only when needed while leaving the remainder of the page as static HTML is known as partial hydration. Island design is critical to this process because it promotes little bits of involvement.

- Comparing Next.js vs. Astro Performance Section titled Comparing Next.js vs. Astro Performance in most cases, Astro websites will load significantly faster than Next.js websites.
- Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it.
- This creates a slower page load and worse performance for your website.

### Next.js

Next.js does not allow partial hydration either. There is experimental support for non-JavaScript webpages in Next.js but none for hydrating components.

- Next.js doesn't support partial hydration and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static.
- Next.js has experimental support for fully-static, zero-JavaScript pages.
- However, the website doesn’t show support for hydrating individual components.

### Remix

Remix does not support partial hydration. There are assumptions that Remix will function with the new React 18 suspense features, but Remix does not allow partial hydration.

## Loading Speed

### Astro

Astro is fast, basically designed for speed. The island architecture strategy aids in SEO because it ranks highly on on-site search engines. It offers a fantastic user experience and has less boilerplate code. It supports most CSS libraries and frameworks and provides a great base for style support.

### Remix

Remix claims that data retrieval is sped up by loading data in parallel on the server.
Remix can prerender pages on the server because it supports server-side rendering.
In contrast to Remix, Astro provides a statically-bundled HTML file with minimal to no JavaScript.

**Why the Remix rewrite is fast?** 

- Instead of caching documents with SSG or SWR, this version caches data at the edge in Redis.
- It runs the application at the edge too with Fly.io.
- Quick image optimization Resource Route that writes to a persistent volume.
- It's its own CDN. This might have been difficult to build a few years ago, but the server landscape has changed significantly in the past few years and is only getting better.

**Why the Remix port is fast?** 

- Remix doesn't support SSG, so we used the HTTP stale-while-revalidate caching directive (SWR, not to be confused with Vercel's SWR client fetching package).
- The result is the same: a static document at the edge (even on the same CDN, Vercel's). The difference is how the documents get there. Instead of fetching all the data and rendering the pages to static documents at build/deploy time, the cache is primed when you get traffic.
- Documents are served from the cache and revalidated in the background for the next visitor.

### Next.js

Next.js boasts of its server-side rendering and static builds features. Next.Js also includes several pre-built techniques for data retrieval.

**Why Next.js is fast?** 

- The homepage uses Static Site Generation (SSG) with getStaticProps.
- At build time, Next.js pulls data from Shopify, renders a page to an HTML file and puts it in the public directory.
- When the site is deployed, the static file is served at the edge (out of Vercel's CDN) instead of hitting an origin server at a single location.
- When a request comes in, the CDN serves the file.
- Data loading and rendering have already been done ahead of time, so the visitor doesn't pay the download + render cost.
- The CDN is distributed globally, close to users (this is "the edge"), so requests for statically generated documents don't have to travel all the way to a single origin server.

## SSR

Server-side rendering (SSR) refers to the process of pre-rendering client-side single-page applications on the server and then sending a fully rendered page on user request. Server-side rendering is essential because server-side rendered applications are SEO-friendly and fast. Apps that support server-side rendering are usually due to their reduced page load time.

Astro, Remix, and Next.js offer server-side rendering (SSR) to generate the markup and content of our pages from the web server before sending it to the client.

## Ease Of Use

Next.js, Astro, and Remix have a short learning curve. Because they are all based on React, you only need a basic understanding of React to set up Next.js, Astro, and Remix. They all feature developer-friendly documentation, making them simple to use and configure.

Next includes the '**`create-next-app`**' CLI command for quickly launching a Next.js application. For bootstrapping an Astro application, use the '**`create astro@latest`**' command, whereas Remix uses the '**`create-remix@latest`**' command for Remix apps.

## Conclusion

We looked at Astro, a highly performant library for shipping no JavaScript code, Remix, a framework for handling client-side and server-side code, and Next.js, which includes data fetching methods such as **ISR, CSR, SSG**, and **SSR**.

We looked at key features, loading speed, hydration, server-side rendering, and ease of use. This allows you to select the framework to utilize for your projects. It's not about which framework is better but which solves your problem best.

If you would like to start building with these frameworks, check out these resources:

- [How to Build a Blog App with Remix and Strapi CMS](https://strapi.io/blog/how-to-build-a-blog-app-with-remix-and-strapi-cms)
- [How to Create an SSG (Static Site Generation) Application with Strapi Webhooks and NextJs](https://strapi.io/blog/how-to-create-an-ssg-static-site-generation-application-with-strapi-webhooks-and-nextjs)

Continue discussing this topic further or connect with more people using Strapi on our [Discord](https://discord.com/invite/strapi) community. It is a great place to share your thoughts, ask questions, and participate in live discussions.

[![Strapi Demo](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Strapi_Demo_be3d83686a.png)](https://strp.cc/3H6vYpx)

Discover the differences between Next.js, Astro, and Remix to find the right one for your next Strapi project.

Comparing Next.js, Astro, and Remix: Which is the Best?

medium_Next.js vs Astro vs Remix: Choosing the Right Front-end Framework.png

small_Next.js vs Astro vs Remix: Choosing the Right Front-end Framework.png

thumbnail_Next.js vs Astro vs Remix: Choosing the Right Front-end Framework.png

Next.js vs Astro vs Remix: Choosing the Right Front-end Framework.png

Next.js vs Astro vs Remix: Choosing the Right Front-end Framework

Technical Writer, Tech Blogger, Developer Advocate Intern,  Self-Taught Frontend Developer. 

Marketing

If you had told me 2 years ago that I would be working remotely with flexible hours for a company outside of South Africa, I would have responded by saying, “Izzit?” with a side eye 👀. That’s a South African way of saying, “Is that so” or “Really?” because I would have never believed it. 
    
Today, I work as a [Developer Advocate Intern](https://treciaks.hashnode.dev/i-am-a-self-taught-developer-and-i-landed-my-first-tech-job-remotely) at the leading open-source Headless CMS’ in the Jamstack ecosystem, [Strapi](https://strapi.io/). As this is the first ever company I’ve worked for, Strapi offers both remote work and flexible hours. Something that’s not common in South Africa as of yet. 
    
 I also love that we have flexible work hours. Having flexible work hours means Strapiers can begin their work earlier in the day or later than the initially set time. I must admit, working from home is a luxury, but one does get too comfortable. Before diving into how I spend my time working remotely, here’s a brief background.
    
 ## Me Before Strapi
    
 I am a [self-taught front-end developer](https://treciaks.hashnode.dev/i-am-a-self-taught-developer-and-i-landed-my-first-tech-job-remotely) who is based in South Africa. I started my journey in tech in 2021 and made a brand name for myself as Trecia Kat. Although I’ve mentioned that Strapi is the first ever company I’ve worked for remotely, it's certainly not the first exposure to remote work. 
    
 I worked as a freelancer for about 6 months for a remote job-based in the US before I joined Strapi as an intern this year. Since I’ve discovered and experienced remote work, I never want to return. Although working in an office gives you a sense of productivity and work energy, here’s how I make the best use of time and bring out productivity at home.
    
## Preparing The Workspace
    
I love to work in a clean workspace as it limits my distractions. Working in a clean, organized environment allows me to start my work with a clear mind. What’s nice about having a workspace is that I’m in my work zone once I'm seated. This helps me be productive and get work done, as I feel like I am sitting in an actual office setting. I set a barrier to letting people in the house know that when I am working, my home office is off-limits.
    
Another thing is to place things you like on your workstation as a way to motivate you for the day. I’m sure you’ve noticed that I am a huge Van Gogh and Hello Kitty fan. I make sure to add anything related to them so that when I get to my office, I feel energized.
    
![workstation.png](https://strapi.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F343dfa19-0500-4d75-9c4f-2fdf995000ec%2Fworkstation.png?id=e002eaa7-8302-4f3c-a11f-b4ab375a512d&table=block&spaceId=5d044f48-c072-4cec-a376-a9ab588fe6d6&width=1540&userId=&cache=v2)
    
## Planning A Schedule
    
Working remotely will come with days when you feel too comfortable and lazy, resulting in not completing work for the day. I’ve experienced it, and one way to curb this is by creating a dedicated work schedule or a to-do list. 
    
When I have a list of things to do, it helps me to see what to prioritize or what-not-to-forget and that, in turn, saves me a lot of time throughout the day. I also avoid multitasking on two or more activities so as not to shift my concentration, which may reduce my productivity.
    
![schedule.png](https://strapi.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F093bda4b-2fa6-432f-9b3a-47d507fc4cf1%2Fschedule.png?id=f916173e-25bb-449d-9216-30248281e44a&table=block&spaceId=5d044f48-c072-4cec-a376-a9ab588fe6d6&width=1440&userId=&cache=v2)
    

## Taking Breaks

While I do try to get a lot of work done and avoid distractions, it does not stop me from taking short rests or ending my work day earlier. Taking regular breaks while working is a great way to keep focus and productivity throughout the day. I like to take breaks to go on the internet or to read a book. 

However, it can happen that once you chill, your will to work is gone, and I do my absolute best to avoid that. I like to start my day early so that in the afternoon, I don’t have to work and have time for other activities. Scheduled breaks can help you resist the desire to leave your desk too soon. You have complete control over the time and frequency of your breaks, but you must create a balance.

![calendar.png](https://strapi.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7c8ec9a7-e23e-4a42-a1c8-6c1c33750980%2Fcalendar.png?id=81071867-1418-4b81-bba4-93cd46dae941&table=block&spaceId=5d044f48-c072-4cec-a376-a9ab588fe6d6&width=1440&userId=&cache=v2)

## Final Thoughts

Remote work and not having to commute has been the best experience. I save money by not traveling to a physical office and enjoy the pleasure of working from home. To successfully get the benefits of working from home and being productive, I really have to take the time to evaluate and plan how I spend my day to ensure that I work at my best.

I am fortunate to be working at Strapi and experiencing the good things remote work offers. Knowing that I can work anywhere, anytime, has me convinced that more companies should invest in this kind of work culture and environment.

Working remotely gives me control over my time and day-to-day activities. This is how I spend and save my time. 

large_Proposal #1.png

medium_Proposal #1.png

small_Proposal #1.png

thumbnail_Proposal #1.png

Proposal #1.png

How to Best Spend Your Time With Remote Work

We can all agree that [Next.js Conf 2022](https://nextjs.org/conf) has been the biggest and most exciting conference this year. With great announcements concerning the future of the web and newly released features. We certainly are looking forward to all that is to come.

It’s been an absolute pleasure that we at [Strapi](https://strapi.io/) have had the opportunity to sponsor and be a part of a vibrant ecosystem, pushing the boundaries of innovation. Also, I have had the pleasure of expressing my passion for Next.js as a [speaker at Next.js Conf 2022](https://nextjs.org/conf/speakers/treciaks). Here’s a recap of the great things to look forward to.

## Next.js 13
Vercel Released Next.js 13 at Next.js Conf. [Next.js 13](https://nextjs.org/blog/next-13) introduces some significant changes, with a focus on reducing the amount of client JavaScript required to run Next.js apps. The biggest feature is the routing and layouts in Next.js with the introduction of the ```app/``` directory (beta). This includes support for **[layouts](https://nextjs.org/blog/next-13#layouts), [server Components](https://nextjs.org/blog/next-13#server-components), [streaming](https://nextjs.org/blog/next-13#streaming) and [suspense for data fetching](https://nextjs.org/blog/next-13#data-fetching)**.

Other new and improved features include[ **```next/image``` (stable)** ](https://nextjs.org/blog/next-13#nextimage)- faster with native browser lazy loading, [@next/font (beta)](https://nextjs.org/blog/next-13#nextfont) - automatic self-hosted fonts with zero layout shift and [**improved ```next/link```**](https://nextjs.org/blog/next-13#breaking-changes) with simplified API with automatic ```<a>```.

### Analytics
[Vercel](https://vercel.com/) welcomes [Splitbee](https://splitbee.io/) to provide all Vercel customers with greater analytics capabilities. With Splitbee's all-in-one analytics and privacy-friendly conversion tool, you can quickly improve your website by better understanding how users interact with it—enabling developers to access real-time analytics for their site and experiment with A/B testing (soon).

Brands of all sizes can now obtain the in-depth website analytics they need to have more control over how they interact with their end users thanks to [Vercel analytics' ](https://vercel.com/analytics)addition of page views and visitor data. Features include:

- Privacy Friendly
- Real-time tracking
- Accessible to all

### Turbopack
The goal of Vercel is to provide innovators with the speed and dependability they need to produce at the exact moment of inspiration by speeding bundling for the Web, starting first with Next.js 13. With that, they’ve launched [Turbopack](https://turbo.build/), a Rust-based successor to Webpack.

Turbopack is based on an innovative incremental design to provide the quickest development experience possible. It refreshes huge applications 10x quicker than Vite and 700x faster than Webpack. On larger applications, the gap is significantly greater—often 20x faster than Vite. Turbopack will be used for the [Next.js 13](https://beta.nextjs.org/docs) development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more. 

## Integrate Next.js with Strapi
With all those exciting features to try out, why not try them out on your next Strapi and Next.js project!? [Strapi](https://strapi.io/) enables the creation, management, and delivery of content-rich experiences to any digital product, channel, or device. While Next.js can be used to create progressive web apps, server-rendered apps, and static websites. Why else should you choose Strapi with Next.js?

- **High Security**: You have no need for a server-side language
- **Best Developer Experience:** Next.js is built on React, and so is Strapi. You can choose your favourite stack to build a microservices architecture.
- **Scalability to infinity:** You have unlimited usage and can scale as you grow with Strapi and Next.js.

Another exciting reason is that you will soon be able to easily deploy your Strapi app to [Strapi Cloud](https://strp.cc/3E27WuI) with ease. Join the [waitlist](https://strp.cc/3E27WuI) and be the first to have a taste of a stress-free deployment process.

If you are looking for more inspiration on why you should build a Next.js app with Strapi, do check out my recent talk, given at Next.js Conf 2022 about “[Why I chose Next.js for my Strapi Application](https://www.youtube.com/watch?v=wVity_0pUeo)”. 

### Get Started with Strapi and Next.js
Learn how to create your own Next.js applications that use Strapi APIs to retrieve and manage content. The best way to get started with Strapi and Next.js is to visit our blogs for the [latest tutorials](https://strapi.io/blog) or follow the course “[Create your ”next” app using Strapi and Next.js](https://www.youtube.com/playlist?list=PL7Q0DQYATmvjXSuHfB8CY_n_oUeqZzauZ)” by Tamas.

Don’t have time or are too busy to start learning how to use Next.js and Strapi? Find one of our starter projects by downloading our [Next.js X Strapi Cheatsheet](https://app.hubspot.com/documents/6893032/view/451374166?accessId=e8198f), which includes the shortcuts for the most commonly used aspects of Strapi with Next.js. Happy coding.




A recap of some of the exciting announcements made about Next.js and why you should start building your application with Strapi and Next.js.

medium_Next.js 13_ What’s New.png

small_Next.js 13_ What’s New.png

thumbnail_Next.js 13_ What’s New.png

Next.js 13_ What’s New.png

Next.js 13: What’s New?

Have you always wondered what technical writing is, how you can be one, what steps to take, or how to start? This blog post, inspired by the [Twitter space](https://twitter.com/strapijs/status/1565728461884456961?s=20&t=QPJzKe7OAxJ5W6YtiWh_DA) we held with the same title, will cover all those questions.

![event flyer](https://paper-attachments.dropbox.com/s_B309C25735275F89C7F12D3FE7EDC94649104BC6BE310F6185596F3E5B1CE9CA_1664972856211_Ultimate+Guide+To+Technical+Writingphoto+8.png)

## What is Technical Writing?
Technical writing is the act of writing or a writing discipline that entails breaking down difficult ideas into much simpler chunks so that others can understand is excellent.

Although everyone may write, it's crucial for technical writers to make their writing easy to read and understand for their audience.

There are different types of technical writing it can be user guides, manuals, software manuals, it can be for educational material. The end goal of technical writing is to explain a complex topic to be easily understood or followed by people

## What are the Benefits of Technical Writing?
There are so many benefits when it comes to technical writing and these are the benefits our guest speakers experienced:

- You get to learn, get paid and have a database of resources online. Such as your own articles. If you have a problem, your articles can be a lifesaver. With technical writing is you get to use your content as a reference in the future.
- You get can get a job, it expands your network and helps you learn concepts far more deeply and you can get paid for it as a side income. The more you write, the more it solidifies your knowledge of the topic you are writing about.
- It helps you to put yourself out there and builds up your personal branding.
- If you come from a self-taught background, you must have content that supports and shows recruiters that you know what you are talking about. That you are worthy of investing in.
- You’re increasing networking opportunities and you are helping the community.
- To write something is to learn twice. When you write about something, you do your research and learn stuff you didn’t know of. Also shows that you know how to adapt to the audience you are writing for.
- It is satisfying when someone uses your articles to improve their learning.
# Technical Writing Process

The writing process is **the series of actions taken by writers to produce a finished work** and each of our guests has similar processes they follow, but each of them in their own way:


- **Yuri**
Research, think of the audience if you don’t know what you are writing about, and organise the layout of the draft that you want to do, making it accessible to everyone.

- **Bonnie**
Topic to write about, Brainstorming. Research, look to people who’ve written about the topic and read through the topics from other articles to understand the topic well. Print an outline, the skeleton of the article, and break them in a step-by-step way, it's easier when you have an outline. Send draft and wait for approval from the client, make readers know what the problem is and how it will benefit them if they read the article, editing. Make use of Grammarly and other tools, review and then it is good for publishing


- **Kolade**
Even if I know what I am writing about, I still do research. The takeaway, research, check if my article is opinionated or not.

- **Savvas**
Cater for the audience, simplify and use simple language for your audience.

- **Emy**
Know who you are writing for, and have the goal to reach out to everyone. Like who is going to be reading your article, write the language you are going to understand. Tools like Grammarly and Hemingway help structure your sentences, but you have to know how as a writer to structure your idea without those tools.


- **Graham**
Review style guides because each company has different style guides. Check abbreviations for first-time readers, they might not know the terminology, don’t assume. Codepen for code demos, do those before writing because it will guide what you can write about. Once you’ve finished writing everything, write the intro, because you want to optimise your intro to include keywords to help with SEO and write the conclusion in the end.


- **Daniel**
What type of writing or method communicates the idea you want to put across? Is it a tutorial, is it a guide, maybe a deployment guide or a comparison or a persuasion article? How do you tell a story, is there a beginning and an end, and why it’s a problem? Think about all that as you are brainstorming for your article.

## Discovering Your Niche

A simple definition of what a niche is is a specialized segment of the market for a particular kind of product or service. meaning, it is something that one or more people can identify you with because you are highly skilled at it. Now, is having a niche important for you as a technical writer? How do you discover your niche?


- **Savvas**
Find something you are good at, it doesn’t have to be a tool or programming language, maybe your code, or anything. The more you are passionate about something, the more words will flow for your article, having a niche identifies you because it's something you are well versed in.


- **Kolade**
If you want to write, don’t bother about the niche, As you progress in your learning, you will find something you are passionate about.


- **Graham**
Write to newbies, write to seniors. Choose who you want to write for.

- **Yuri**
How to find a niche, write about general things. You don’t have to force it, you will discover that you like to write about a specific thing and that will become your niche.

## Simplicity vs Accuracy
- Explain things in your own words, don’t use difficult words. You can have technical content and make it more accessible to everyone.
- If a lot of things need base knowledge (the basics) and if you don’t know them as well. Refer them to other articles that explain what they don’t know.
- Be careful what you are leaving behind or including in your articles. Do not filter too much.
- Optimise for simplicity and accuracy, and break sentences into shorter paragraphs. The reason is when reading sentences, people stay and grab what you are passing across. Longer sentences are hard to digest.

## Does the Length of Your Articles Matter?
- It's about the flow and less about the length. Storytelling comes in if you keep your reader engaged, with a nice story. If they are engaged, they will happily read through.
- It depends on what you are writing about, the subject and the context matter. Bear in mind, that the headings are nice and have an appropriate beginning because people scan through your article
- If you are writing about how to make a portfolio, make sure to explain things well and write a thousand words. The important thing to note, it is not the quantity but the quality of your articles that matters. The way you structure your article is also important. If the structure is good, the reader will receive your message well.
- When do you know when your article needs to be split into a series? Are the concepts you are writing about separate? If that’s the case, do split it. You want each article to answer a question or an end goal, context matter. If you think each item makes sense on its own then you can split it.

## How to Promote Your Article
- Online platforms. Blog platforms because they have great SEO, it's okay to promote on your social media and make your friends share your work too.
- Optimise for SEO, make sure your article is well structured. Break in links where they are supposed to be linked. Organic traffic is free, share on LinkedIn, and Twitter, and share your articles to friends. If you can, implement email marketing to people

## How to Start
You can start with [Write For the Community](https://github.com/strapi/community-content) programme we have here at Strapi. 

Anyone with any level of experience with Strapi is more than welcome to start writing for us. You don’t have to be an experienced technical writer. What matters is that your knowledge will be more than enough to help the Strapi community or those interested in learning about Strapi.

Other than that, our guests also have shared what else you can do to begin your journey in technical writing:

- **Graham**
Just write, after every article, review what to improve on. The introduction, the body, and what you could have written better. It's good to just start writing and you will see along the way. Start on [dev.to](http://dev.to) because people are friendly. Don’t focus on the number of views on your article.


- **Kolade**
Start with Hashnode, and then start writing for FreeCodeCamp because you get to work with editors who will edit your articles and who will help you with how you can improve. So you will get experience from experienced writers. When you have articles to present, you can apply to FreeCodeCamp

- **Savvas**
Even tweets and Twitter threads, cutting articles into small chunks, is a nice way to start.

- **Bonnie**
Check google dev docs on how to write your articles. Document your projects and write them in a way that if someone wants to build a similar project as yours, they can follow along and use it. Use [dev.to](http://dev.to) and [hashnode.com](http://hashnode.com) and other writing platforms. Writing is like building a CV because recruiters see what you are putting out there.

- **Emy**
If you understand something well, write about it. If you continue to be consistent, people will notice and discover you and that is how opportunities come to you. One of the people who worked there can see your work and approach you for work. You can apply to write at LogRocket as well.

- **Yuri**
[Hashnode.com](http://Hashnode.com) and [medium.com](http://medium.com) helps you push your content forward. But most importantly, consistency.

## Learn More About Technical Writing
There are so many great resources to learn about technical writing. Such as Emy’s article about “[Starting Out With Technical Writing](https://bingehtheblogger.hashnode.dev/starting-out-with-technical-writing)”, Yuri’s curated [list of technical writing resources](https://twitter.com/yuricodesbot/status/1566937169574481926?s=20&t=JQDRopNKvgnMN10CTovRWQ) and Bonnie’s own [book and resources to technical writing](https://www.thegreatbonnie.com/) and [Daniel’s GitHub repo ](https://github.com/malgamves/CommunityWriterPrograms) which contains lists of paid technical resources.

With practice comes perfection. The only way to be a great technical writer is to write more. The more you write, the more you learn and get better. Once you are comfortable writing for the [Write For the Community](https://strapi.io/write-for-the-community) program at Strapi, you may also venture into contributing to making our [documentation](https://github.com/strapi/documentation) better.



Don’t know how to start technical writing, which blogging platforms to write on or how to market your articles? This article is for you.

medium_The Ultimate Guide to Technical Writing.jpg

small_The Ultimate Guide to Technical Writing.jpg

thumbnail_The Ultimate Guide to Technical Writing.jpg

The Ultimate Guide to Technical Writing.jpg

The Ultimate Guide to Technical Writing

Do you ever ask yourself, “What can I build today?"" You don’t have to worry about that anymore, especially if this is your first Next.js project. In this tutorial, we will learn how to build a job board with Next.js and Tailwind CSS. Below is a list of what this tutorial covers.

- A brief introduction to Next.js and Strapi
- Setting up Strapi
- Build the architecture of your content
- Creating your content with Strapi’s content manager
- Setting up your front end
- Connecting the backend to the frontend
- Dynamic API routes
- Conclusion

## An Introduction to Next.js and Strapi

[Next.js is a React framework](https://nextjs.org/) that allows you to build supercharged single-page Javascript apps, SEO-friendly and extremely user-facing static websites and web applications using the React framework. Its advantages include hybrid static and server rendering, TypeScript support, smart bundling, route prefetching, and more, with no extra configuration needed.

[Strapi is a JavaScript-built headless CMS](https://strapi.io/wordpress-alternative) that helps you build and manage the backend of your project with ease while allowing you to use any [frontend framework](https://strapi.io/integrations) of your choice. Let’s see how we can use these powerful tools together to create our job board application.

## Setting up Strapi
Make sure you have [Node.js](https://nodejs.org/en/download/) and [NPM](https://docs.npmjs.com/cli/v6/commands/npm-install) installed on your machine before continuing.

1. In your code editor, create your project folder and inside it, create a folder called backend.  I used VSCode, and my project folder is named `job board`.

```bash
    mkdir backend && cd backend
```
2. Proceed to install Strapi on your machine by running this command.
```bash
    npx create-strapi-app@latest <app-name> --quickstart
```
Strapi will then install all the necessary dependencies in the backend folder. 

3. After the installation, run the command below:
```bash
     npm run develop
```
This starts the Strapi server at [localhost:1337](http://localhost:1337) and automatically opens up the sign-up form in your browser. 

4. Fill in your details and sign in. Welcome to your admin dashboard.

![Strapi Admin Dashboard](https://www.dropbox.com/paper/ep/redirect/image?url=https%3A%2F%2Fpaper-attachments.dropbox.com%2Fs_691E5F0E2CB69A54A99A39FE1428B0BCC77A89C64F3A0D04D17720BA9FB2E890_1662047539149_Strapi%2BAdmin%2BDashboard.png&hmac=pQ1GxlHlOhndMSUZ%2BSdleCMEmU8rcDNN121bN7eWgMs%3D&width=1490)

## Build Your Content Architecture
Go to the 'Content-Type Builder'. This is where you’ll create your data structure. Click on the 'create new collection'. This modal below should appear. The display name will be "job”. This name will be displayed for your URL link ([http://localhost:1337/api/job](http://localhost:1337/api/job)).

![content type builder](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774626336_Screenshot+2022-08-10+at+13.48.58.png)

Click 'continue’. This will take you to the next modal. In this modal, you can select the fields for our collection types. In our case, we will select:

1. **Text**: The name will be “vacancy”.
2. **Text**: The name will be “recruiter”.
3. **Rich Text**: The name will be “description.”
4. **Email:** The name will be “email”.
5. **Number:** The name will be “salary” and we will choose the integer number format.
6. **Media:** The name will be "image." Set the type to “single media”. Proceed to click on advanced settings and select “allowed types of media” and check only “images”.

Save everything. After that, go back and click “create new collection” again. This time, the display name should be "Category.” Click “continue” and select “relation”. This is to enable us relate this collection type to our job type. You will see how as we proceed. Add another field and select the name field. For the name, we will name it "name.” Then, save.

![Edit Jobs Modal](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774653529_Screenshot+2022-08-10+at+14.11.37.png)

Once you’ve completed the actions above, your collection type should look like the screenshot below. Let’s add some content.

![Collection Type](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774665426_Screenshot+2022-08-10+at+14.18.14.png)

## Creating Your Content
We are now ready to add some content. Go to category and click on the “create new entry” button. There, we will enter the type of category the job belongs to. For our first entry, we will add “entry”, then proceed to add intermediate, junior, and senior.

Don’t forget to save each entry and publish them. You should have something similar to the image below:

!["Create New Entry" page](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774689540_Screenshot+2022-08-10+at+14.46.25.png)

Go to job, click “create new entry,” and fill in your data. When completed, it should look like the screenshot below. Don’t forget to relate your categories to your job type. For this one, I selected “entry”. Create multiple entries, save and publish.

![Collection Summary](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774705431_Screenshot+2022-08-10+at+14.45.34.png)

Make sure you’ve saved and published your content. Next, we will go to **Settings > Users and Permissions Plug-In > Roles > Public**. What we are doing here is to make sure that the data is accessible from the frontend. If you don’t do that, you will get this error:

![Not Public Error](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774732206_Screenshot+2022-08-10+at+15.12.45.png)

I am using the [RapidAPI extension on VSCode](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client) to make a request to the API. Check the boxes for “find” for each of your content types: job and category. You can go back again and check if the API call returns JSON data. 

You will notice that the JSON data returned does not contain everything, including the image. To enable the API to return all the JSON data, make sure your API endpoint includes the query string with [the populate parameter](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html) like this: [http://localhost:1337/api/jobs?populate=*](http://localhost:1337/api/jobs?populate=*) . The API is ready for use in the frontend.

## Setting up the Frontend
Before we install Tailwind CSS and Next.js, create a folder named frontend. You will find the full documentation on [how to install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs), as styling is not the main priority of this tutorial.

```bash
    mkdir frontend && cd frontend
```

Install Next.js in the frontend folder and then run the command to launch the Next.js [localhost:3000](http://localhost:3000) server in the browser.

```bash
    npx create-next-app <app-name>
    npm run dev
```

Your job board will contain a basic card component that will display the title, description, image, email, and recruiter’s name that will lead to the full detailed page of the job post. You will then create a page that displays each of the job posts using dynamic routing.

In the root folder of the pages folder “frontend/pages”, create a new folder called “jobs” and inside it, create a file called index.js (frontend/pages/jobs/index.js). Write up an async function to fetch the jobs from the backend.

```js
    // to fetch data
    export const getStaticProps = async () => {
         const res = await fetch("<http://localhost:1337/api/jobs?populate=*>")
         const data = await res.json()
         
         return {
              props: {
                   getJobs: data.data
              }
         }
    }
```

## Connecting the Backend to the Frontend
In the same file (frontend/pages/jobs/index.js), beneath the function we wrote above, write up the JobPage component. This component will take the “getJob” object as an argument and display whatever we’ve specified.

```js
    import Link from 'next/link'
    
    const JobPage = ({getJobs}) => {
        // Minimising the paragrahps on the card component
        const MAX_LENGTH = 250
    
        return ( 
         <>
              <section className="w-full px-4 py-24 mx-auto max-w-7xl md:w-4/5">
                   <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
                        {getJobs.map( job => (
                            <Link key={job.key} href={'/jobs/' + job.id}>
                              <div>
                                 <h2 className="mb-2 text-xl font-bold leading-snug text-gray-900">
                                     <a href="#" className="text-gray-900 hover:text-purple-700">{job.attributes.vacancy}</a>
                                 </h2>
                                     <p className="mb-4 text-sm font-normal text-gray-600">
                                                   {job.attributes.description.substring(0, MAX_LENGTH) + " ..."}
                                      </p>
                                 <a className="flex items-center text-gray-700" href="#">
                                   <div className="avatar">
                                      <img
                                        className="flex-shrink-0 object-cover object-center w-12 h-12 rounded-full"
                                        src={`http://localhost:1337${job.attributes.image.data.attributes.url}`}
                                        alt={"Photo of " + job.attributes.recruiter} 
                                       />
                                    </div>
                                   <div className="ml-2">
                                       <p className="text-sm font-semibold text-gray-900">{job.attributes.recruiter}</p>
                                       <p className="text-sm text-gray-600">{job.attributes.email}</p>
                                   </div>
                                 </a>
                               </div>
                            </Link>
                        ))}   
                   </div>
         
                 {/* btns */}
                 <div className="flex flex-col items-center justify-center mt-20 space-x-0 space-y-2 md:space-x-2 md:space-y-0 md:flex-row">
                     <Link href="/"><a href="#" className="px-3 py-2 text-indigo-500 border border-indigo-500 border-solid hover:text-black md:w-auto">Home</a>
                     </Link>
                 </div>
             </section>     
         </>
         )
    }
     
    export default JobPage;
```

Then go to your browser and type in: [http://localhost:3000/jobs](http://localhost:3000/jobs). Your application should look like this:

![Sample Application Screenshot](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774762176_Screenshot+2022-08-09+at+15.58.39.png)

## Dynamic API Routes
We want to see the full details of each job post on our board. How can we do that? With Next.js, we will use dynamic routes to create a single page based on its Id.

Create a new file inside the page folder, name it [id].js (frontend/pages/jobs/[id].js). Proceed with this code below.

```js
    export const getStaticPaths = async () => {
        const res = await fetch("<http://localhost:1337/api/jobs?populate=*>")
        const { data: jobs } = await res.json()
    
                    const paths = jobs.map( (job) => {
            return  {
                params: { 
                    id: job.id.toString(),
                }
         }})
    
        return {
            paths,
            fallback: false
        }
    }
    
    export const getStaticProps = async ({params}) => {
        const {id} = params
        const res = await fetch(`http://localhost:1337/api/jobs/${id}?populate=*`)
        const {data: job } = await res.json()
    
              return {
            props: {job},
            revalidate: 1,
        }
    
    }
```

The getStaticPaths function gets called during build time and pre-renders paths for you, which are based on the job Id from each individual object returned from the API. Make sure that the Id is converted from integer to string for it to properly work.

The getStaticProps function now only fetches a single job post based on its Id in the URL. The data fetched will now look like this: [http://localhost:3000/jobs/1](http://localhost:3000/jobs/1) and return the contents for Id 1.

To style your full detailed job post page, you can copy and paste this code for the DetailedJobs component.

```js
    const DetailedJobs = ({job}) => {
        const Max_DATE_LENGHT = 10
        const Max_TIME_LENGHT = 11
        
        return ( 
            <>
            {/* {JSON.stringify(job, null, 2)} */}
            <article className="px-4 py-5 mx-auto max-w-7xl">
                <div className="w-full mx-auto mb-12 text-left md:w-3/4 lg:w-1/2">
                    <p className="mt-6 mb-2 text-xs font-semibold tracking-wider uppercase text-primary">{job.attributes.categories.data[0].attributes.type + " LEVEL"}</p>
                    <h1 className="mb-3 text-3xl font-bold leading-tight text-gray-900 md:text-4xl">
                    {job.attributes.vacancy}
                    </h1>
                    <div className="flex mb-6 space-x-2 text-sm">
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">CSS</a>
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">Tailwind</a>
                    <a className="p-1 bg-indigo-500 rounded-full text-gray-50 badge hover:bg-gray-200" href="#">AlpineJS</a>
                    </div>
                    <a className="flex items-center text-gray-700" href="#">
                    <div className="avatar">
                        <img 
                        className="flex-shrink-0 object-cover object-center w-24 h-24 rounded-full"
                        src={`http://localhost:1337${job.attributes.image.data.attributes.url}`}
                        alt={"Photo of " + job.attributes.recruiter} />
                    </div>
                    <div className="ml-4">
                        <p className="font-semibold text-gray-800 text-md">{job.attributes.recruiter}</p>
                        <p className="text-sm text-gray-500">{job.attributes.publishedAt.substring(0, Max_DATE_LENGHT)}</p>
                        <p className="text-sm text-gray-500">{job.attributes.createdAt.substring(16, Max_TIME_LENGHT)}</p>
                    </div>
                    </a>
                </div>
    
                <div className="w-full mx-auto prose md:w-3/4 lg:w-1/2">
                    <p>
                    {job.attributes.description}
                    </p>
                </div>
                
                <div className="flex flex-col items-center justify-center mt-10 space-x-0 space-y-2 md:space-x-2 md:space-y-0 md:flex-row">
                     <Link href="/jobs"><a href="" className="px-3 py-2 text-indigo-500 border border-indigo-500 border-solid hover:text-black md:w-auto">Back</a>
                     </Link>
                 </div>
            </article>
            </>
         )
    }
     
    export default DetailedJobs;
```

Your final application should look like this:

![The Job Application](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774819005_Screenshot+2022-08-12+at+13.26.54.png)

## Conclusion
I hope you’ve enjoyed this tutorial and are looking forward to building additional projects with Strapi and Next.js.

When deploying your application on Vercel, make sure you change Strapi’s URL link to the one you’ve hosted your Strapi app to avoid deployment issues. In my case, I hosted my Strapi application on Heroku.

![Code Sample](https://paper-attachments.dropbox.com/s_A2C467E6FD17F8ED9799C07C3B4922088C398A223A32EB37D94B5B7D08F501E1_1661774867417_Screenshot+2022-08-29+at+13.53.05.png)

[This project in the tutorial](https://github.com/TreciaKS/secure-job) is absolutely open source and if you want to add a feature or edit something, feel free clone it and make it your own or to fork and make your pull requests.

Looking for more things to build with Strapi? Here’s [how you can build a podcast application with Strapi and Next.js.](https://strapi.io/blog/how-to-build-a-podcast-app-using-strapi-and-nextjs) 

