<figure class="wp-block-image size-large"><img src="https://cmsinntech.inntech.dev/wp-content/uploads/2023/02/code-g993b25a26_1920-1024x683.jpg" alt="" class="wp-image-176"/></figure>



My first interaction with <a rel="noreferrer noopener" href="https://nextjs.org/blog/next-13" target="_blank">Next.js 13</a> differed from other javascript frameworks — I was impressed. (even different Next.js versions)



So, I decided to write an article about why Next.js 13 is different and why you should use it in your projects.



What is Next.js?



Next.js is a popular open-source React framework that provides <a href="https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/" rel="noreferrer noopener" target="_blank">server-side rendering (SSR)</a>, static site generation (SSG), and other advanced features to help developers build fast, scalable, and modern web applications. It was created by <a href="https://vercel.com/" rel="noreferrer noopener" target="_blank">Vercel</a>, a cloud platform for building, deploying, and scaling web applications. (We use Vercel at <a href="https://inntech.dev" rel="noreferrer noopener" target="_blank">INNTECH</a> to deploy our javascript-based web platforms)



Next.js is a full-stack environment where you can define API routes and UI components. You can use third parties like <a href="https://firebase.google.com/" rel="noreferrer noopener" target="_blank">Firebase</a>, <a href="http://stripe.com" rel="noreferrer noopener" target="_blank">Stripe</a>, etc, directly here, without a separate backend, which helps you build tech products (like MVPs) more efficiently.



Why is Next.js relevant?



At INNTECH is very important to use technologies that allow us to build efficient, scalable, and time-efficiency tech products. So, we constantly try to test cutting-edge updates from the industry. Last week I tested Next.js 13 with <a href="https://www.inntech.dev/blog/how-to-create-a-backend-with-headless-cms-for-everything-in-minutes" rel="noreferrer noopener" target="_blank">headless WordPress CMS</a>, trying to build a simple job listing for companies, and I extracted some features which should make you use Next.js 13.



Why should you use Next.js 13?



<ol>
<li>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch" rel="noreferrer noopener" target="_blank">fetch()</a> directly on your page in SSR mode. This provides significant performance benefits, including automatic caching and data re-validation.</li>
</ol>



<pre class="wp-block-preformatted">// Next.js 13 // This is a SSR page async function getPage(url) { const res = await fetch(`http://localhost:3000/api/page?url=${url}`); if (!res.ok) { redirect("/"); } return res.json(); } export default async function Page({ params }) { // You can fetch() directly here const page = await getPage(params.url); return ( &lt;div&gt; &lt;div&gt;{page &amp;&amp; page.name}&lt;/div&gt; &lt;/div&gt; ); }</pre>



<pre class="wp-block-preformatted">// Next.js 12 function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() // Pass data to the page via props return { props: { data } } } export default Page</pre>



2. You can define “error” and “loading” components directly in your folder structure by default. <a href="https://beta.nextjs.org/docs/routing/defining-routes" rel="noreferrer noopener" target="_blank">A better directory structure</a>.



<figure class="wp-block-image"><img src="https://miro.medium.com/max/278/1*2k5EVbfmZNUOVX-smLFAPQ.png" alt=""/></figure>



<figure class="wp-block-image"><img src="https://miro.medium.com/max/651/1*M1LxCaTgUC7Ke4f4YtFWkg.png" alt=""/></figure>



3. You can define dynamic metadata very easily.



<pre class="wp-block-preformatted">async function getJob(id) { const res = await fetch(`https://localhost:3000/api/job/${id}`); return res.json(); } export async function generateMetadata({ params }) { const job = await getJob(params.id); return { title: job.title } } export default async function Page({ params }) { const job = await getJob(params.id); // ... }</pre>



4. Next.js 13 introduces Automatic Image Optimization, which automatically optimizes images for faster loading and better performance. Also, the “next/font” package is optimized, and the font files are downloaded at build time with the rest of your static assets. (No requests are sent to <a href="https://fonts.google.com/" rel="noreferrer noopener" target="_blank">Google</a> by the browser. = STUNNING PAGE SPEED)



<pre class="wp-block-preformatted">import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', }) export default function RootLayout({ children }) { return ( &lt;html lang="en" className={inter.className}&gt; &lt;body&gt;{children}&lt;/body&gt; &lt;/html&gt; ); }</pre>



Conclusion



In my opinion, Next.js 13 is a game changer in the web development industry, and if you know how to use it at maximum capacity, you can build stunning websites with high conversion rates.



<h4 id="84fa">About me</h4>



My name is Ilie Andrei, and I am very passionate about building tech products and streamlining the process of developing and validating ideas. I founded <a rel="noreferrer noopener" href="https://inntech.dev" target="_blank">INNTECH</a> — a web &amp; mobile development company focused on MVP Development and building micro-apps.

Why should you use Next.js 13?

<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*MNH-jv3OOdaTbEvspULEpw.jpeg" alt=""/><figcaption class="wp-element-caption">How to create a backend CMS for everything in&nbsp;minutes?</figcaption></figure>



You need to be efficient if you want to test an idea or create a straightforward tech MVP. In this article, I will show you a fast way to build CMS (with CRUD operations).



Many software industry people blame WordPress for its security problems, but in my opinion, if you respect some basics, you can gain security and performance.



Summary:



<ol>
<li>Why WordPress?</li>



<li>What is a Custom Post Type, and how to create it (CPT)?</li>



<li>What is a Custom Field, and how to create fields for your CPT (ACF)?</li>



<li>How to combine CPT and ACF in an actual project?</li>



<li>How to expose a CRUD API with your CPT&amp;ACF to consume it in a front-end / headless CMS?</li>



<li>Conclusion &amp; Real-life examples</li>
</ol>



Why WordPress?



So, first, let me explain why I choose WordPress for this article and why we use it for specific projects.



<ul>
<li>Easy deployment; You need a CPANEL or basic hosting to deploy the backend. (most hosting companies provide default support for WordPress)</li>



<li>Easy to build and understand; I will show you in this article how easy it is to create a CMS backend with many custom fields.</li>
</ul>



We use many technologies at INNTECH, from WordPress to React.js, Vue.js, Node.js, and so on. Still, we are tech-agnostic and provide performance, security, and value to our clients based on their business criteria.



For this tutorial, you only need WordPress hosting.



After you buy hosting with CPANEL support, you need to log in to your account and create a WordPress instance. (I suppose that you are a tech person, and you know how to create it)



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*2kSSTn6XLyqAUtoBjNxTgg.png" alt=""/><figcaption class="wp-element-caption">WordPress Admin&nbsp;Panel</figcaption></figure>



We need to create a child theme based on the default WordPress theme. Go to plugins and install “Child Theme Configurator”. Now go to “Tools” -&gt; “Child Themes” -&gt; “Analyze” -&gt; Change the theme directory name -&gt; Create New Child Theme.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*lNHjz9gZEDpmIx_-Jl_EbA.png" alt=""/><figcaption class="wp-element-caption">WordPress Plugins</figcaption></figure>



After you create the child theme, go to Appearance -&gt; Themes -&gt; Activate your child theme. Now go to “Plugins” and delete all plugins. (You will need only two plugins, so let’s move forward)



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*vkq3eug3DoS-gIEywtTpMg.png" alt=""/></figure>



What is a Custom Post Type, and how to create it (CPT)?



In WordPress, a custom post type allows you to define a new content type different from the default posts and pages. This new content type can be anything from a portfolio or event listing to a team member or product page. For this example, we will define a CPT as a job post. For fast implementation, we will generate the code with a plugin.



So, first, we need to install the “Custom Post Type UI” plugin.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*p8rBiYHD3p89-Gh1r_brmA.png" alt=""/><figcaption class="wp-element-caption">WordPress CPT UI&nbsp;Plugin</figcaption></figure>



After that, we need to go to “CPT UI” -&gt; “Add/Edit Post Types,” and here we will create the CPT by completing the fields and pressing the “Add Post Type” button.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*Lbluzyw1obkFapWMO4CBKA.png" alt=""/><figcaption class="wp-element-caption">How to create a CPT in WordPress</figcaption></figure>



At this moment, we can see the CPT in the left menu. We need some extra steps to verify if the CPT is correctly configured. So, let’s go to “CPT UI” -&gt; “Add/Edit Post Types” -&gt; “Edit Post Type”. Here we need to scroll and find if “Show in REST API” is set to True.



We can create and manage job posts now, but we need extra fields like image, company, job description, etc.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*toqft4zOecLZcmuQ8GjZJw.png" alt=""/></figure>



What is a Custom Field, and how to create fields for your CPT (ACF)?



In WordPress, a custom field is a feature that allows you to add additional metadata to posts, pages, or any other type of content. This metadata can be in key-value pairs, where the key represents the field’s name, and the value is the data you want to store.



Custom fields can help add extra information to your content, such as author information, date, location, or any other information not included in the default WordPress post or page. A custom field can also be complex data, such as links, images, or videos.



We will add ACF to the “Job Posts” CPT in our example.



So, let’s get forward. Go to “Plugins” -&gt; “Add new” -&gt; Search “Advanced Custom Fields” -&gt; Install &amp; Activate.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*yHe-NlJJLZ0da2XYa9phFQ.png" alt=""/></figure>



Now, you can see the “Custom fields” menu on the left. Click on “Custom Fields” and then the “Add Field Group” button.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*9INkODVjmO0RugbzvkhW7g.png" alt=""/><figcaption class="wp-element-caption">Adding ACF to CPT in WordPress</figcaption></figure>



Write the name of the group (in my case — “Job Posts”), and then you can create as many fields as you need. Here you can see some examples of ACF types:



<ul>
<li>Text;</li>



<li>Image;</li>



<li>Wysiwyg editor;</li>



<li>Google Map;</li>



<li>And if you have PRO ACF — Repeater; (this one is like an array of any type)</li>



<li>And so on; (you can discover this by testing and reading the <a href="https://www.advancedcustomfields.com/resources/" rel="noreferrer noopener" target="_blank">ACF documentation</a>)</li>
</ul>



So, let’s suppose that a Job Post has the following fields:



<ul>
<li>Company name — Text;</li>



<li>Featured image — Image;</li>



<li>Job Description — Wysiwyg editor;</li>



<li>Job location — Google Map; (<a href="https://www.advancedcustomfields.com/blog/google-maps-api-settings/" rel="noreferrer noopener" target="_blank">you need to add API KEY for this feature</a>)</li>
</ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*iS9b_uVJCYcntoUrPtmlMw.png" alt=""/></figure>



Now we need to assign the ACF to the post type and make it visible. Scroll down after pressing “Save changes” -&gt; go to “Settings” -&gt; Apply the rule based on your CPT -&gt; “Save changes” -&gt; scroll down -&gt; press “Group Settings” -&gt; set the “Show in rest API” toggle to True -&gt; “Save changes”.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*0L-ZFISbPlvvJpcTffdfig.png" alt=""/></figure>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*PC_y0g_QdN1_KG-buMgcag.png" alt=""/></figure>



How to combine CPT and ACF in a real project?



Now, let’s create some job posts. Go to “Job posts” from the left menu and click “Add New”.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*nttCAwC31xWYDg3bP5Ea0A.png" alt=""/></figure>



How to expose a CRUD API with your CPT&amp;ACF to consume it in a front-end / headless CMS?



We have entries in our database, so we need to expose a CRUD API and consume it. Default, WordPress has an API so we will use it. (if you want to create custom routes, you can check the <a href="https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/" rel="noreferrer noopener" target="_blank">documentation </a>— it’s very, very simple)



Here we can read about the custom <a href="https://developer.wordpress.org/rest-api/extending-the-rest-api/routes-and-endpoints/" rel="noreferrer noopener" target="_blank">WordPress API</a>, so let’s take our example: our post type name is “jobs”, so we can get all jobs from <a href="http://testwpp.inntech.ro/wp-json/wp/v2/jobs" rel="noreferrer noopener" target="_blank">this route</a>.



This route returns an array of jobs. Each job from this array contains an “acf“ field where you can find your custom fields. Now you can call this API and map the array in your front-end.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*A8Kfnvzyp5DrGPw03YYPJg.png" alt=""/></figure>



If you want a single job, you can call this route: <a href="http://testwpp.inntech.ro/wp-json/wp/v2/jobs/%7Bid%7D;" rel="noreferrer noopener" target="_blank">http://testwpp.inntech.ro/wp-json/wp/v2/jobs/{id};</a> for example, my first job has ID “14,” and if I request this route, I will receive the job with ID 14.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*FcSOgtDGG2OcrHSrO2KquA.png" alt=""/></figure>



You can also take action like UPDATE and POST on your CTP, but you need Authentification in your request. (here, you can read the official WordPress documentation or write a comment if you want to create a tutorial)



Conclusion &amp; Extras



This article should help you save a lot of time when you need to test an idea very fast. With CPT &amp; ACF, you can make whatever you want, from a job portal to a stunning quiz system and a headless CMS for your mobile app.



You can also do whatever you want, like creating CRON and syncing data with other data sources, adding CORS rules for security, creating custom functions like generating PDFs based on the CPT, creating reports, etc. (you can add a comment or contact me for a free consulting)



<h3>About me</h3>



My name is Ilie Andrei, and I am very passionate about building tech products and streamlining the process of developing and validating ideas. I am the founder of <a href="https://inntech.dev" rel="noreferrer noopener" target="_blank">INNTECH</a> — a web &amp; mobile development company focused on MVP Development and building micro-apps.

How to create a backend with headless CMS for everything in minutes?

<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*7RBn17oYyA-K6CIPcSF8_w.jpeg" alt=""/><figcaption class="wp-element-caption">Connect micro apps with your&nbsp;start-up</figcaption></figure>



If you are a tech startup founder, you need more traffic, leads, and clients. The startup market is huge at this moment, and you probably have a lot of competitors. You pay a lot for Facebook Ads, Google Ads, Tiktok, and so on, so you need to be creative and build alternative <a href="https://www.helpscout.com/customer-acquisition/" rel="noreferrer noopener" target="_blank">customer acquisition channels</a> other than classic ones.



Examples of traditional customer acquisition channels:



<ul>
<li>Advertising;</li>



<li>Referral marketing;</li>



<li>Cold sales;</li>



<li>Networking;</li>



<li>and so on;</li>
</ul>



Let’s discuss how you can create alternative customer acquisition channels by building micro apps/tools connected to your startup.



First, let’s take a real example:



Shopify is a leading e-commerce platform that provides businesses with the tools and resources they need to create and manage an online store.



That means Shopify’s customers are e-commerce business owners (customer persona), and Shopify provides a solution for businesses looking to sell products online, by simplifying the process of setting up and managing an online store and supplying a wide range of customization and security features.



So, starting from these points: your customer persona, market, and the problem you solve, you can attract clients by building helpful tools for them.



In our example, Shopify has a tool for <a href="https://www.shopify.com/tools/logo-maker" rel="noreferrer noopener" target="_blank">creating a free logo</a> with excellent SEO (they appear with this tool on the first page on multiple keywords). Based on my research, there are millions of searches with related keywords from this area, like: “create a free logo”, “logo maker” and so on.



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*wQVtnokg7rfPD7JBT62RXQ.png" alt=""/><figcaption class="wp-element-caption">Search volume for “create free&nbsp;logo”</figcaption></figure>



That is an example of a customer acquisition channel based on micro apps/tools.



The Methodology



Based on this, we can create a methodology to launch micro apps/tools that helps us to gain traffic and leads:



<ol>
<li>Find out what your customer profile is;</li>



<li>Find out what problem you solve with your startup;</li>



<li>Search related problems for your customers;</li>



<li>Pick a problem and find a technical solution;</li>



<li>Define what success means for us with this app; (time, allocated resources vs. output, traffic after x months, Google position after x months, etc.)</li>



<li>Build the product in-house or <a href="http://inntech.dev/" rel="noreferrer noopener" target="_blank">outsource to a company that can make it fast and efficient</a> (pay attention to SEO, page speed, and UX);</li>



<li>Launch your product; (try to maximize the awareness by posting the launch on all platforms like ProductHunt, Twitter, Reddit, and so on)</li>



<li>Continuous Improvements by <a href="http://chat.openai.com/" rel="noreferrer noopener" target="_blank">posting articles using AI</a> to boost your SEO, following your competitors and keywords, and trying to talk about the product everywhere;</li>



<li>If you have a budget, you can try some paid ads for short-term results; (it’s essential to understand that you need time to gain good positions in Google)</li>
</ol>



So, let’s make a simulation!&nbsp;:D



We suppose we have a refurbished phone startup (like <a href="https://flip.ro" rel="noreferrer noopener" target="_blank">https://flip.ro/</a>) where we buy, repair, and sell phones.



<ol>
<li>Customer profile: people that buy second-hand phones;</li>



<li>What problem do we solve? We make the phone selling and buying process easier;</li>



<li>Related problems: When customers buy a phone, they need to compare all competitors;</li>



<li>Success: 6 months:</li>
</ol>



<ul>
<li>Appear on the first page of Google on “Samsung s21 specifications”, “iPhone 13 vs. Samsung S22”;</li>



<li>2k redirected traffic to my app;</li>
</ul>



<ol>
<li>So we can build a micro-app where users can compare phones for free through a web app;</li>



<li>This is a simple app, so we can make it very fast because we need to optimize our go-to-market time. At this point, we need to research the competitors and what keywords we target.</li>



<li>Now it’s time to launch our app on multiple platforms like <a href="https://producthunt.com" rel="noreferrer noopener" target="_blank">ProductHunt</a>, <a href="https://twitter.com/home" rel="noreferrer noopener" target="_blank">Twitter</a>, <a href="http://reddit.com" rel="noreferrer noopener" target="_blank">Reddit</a>, and so on)</li>



<li>Create articles like: “What is the difference between Samsung S21 and Samsung S22” and “Where can I buy iPhone 14 second hand?” and so on, based on Google Keyword Planner; And also on phone launches, you can make paid ads to capture the trends;</li>
</ol>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*U5oGeOVGaLhYebZNLd34vw.png" alt=""/></figure>



<h3>About me</h3>



My name is Ilie Andrei, and I am very passionate about building tech products and streamlining the process of developing and validating ideas. I am the founder of <a href="https://inntech.dev" rel="noreferrer noopener" target="_blank">INNTECH</a> — a web &amp; mobile development company focused on MVP Development and building micro-apps.

From the blog

Why should you use Next.js 13?

How to create a backend with headless CMS for everything in minutes?

How can you generate more traffic and leads for your start-up building micro apps/tools?