Let's proceed with blog setup. If the previous step is not yet completed, please refer back to it from <a href="https://taizen-note.vercel.app/blog/sdr-eh85qrl" target="_blank" rel="noopener noreferrer">here</a>. For our blog, i picked the Sanity Studio (headless CMS) up. They seem to be dev-friendly ;) So we can just follow <a href="https://www.sanity.io/guides/nextjs-app-router-live-preview#46870b28c449" target="_blank" rel="noopener noreferrer">their great "Next.js x Sanity" tutorial</a> If you have completed tutorial #1, you can directly move to "Create a new Sanity project". ---- (Follow the above tutorial) ---- Below are the important points to note.&nbsp;<ul><li>I removed the field "Author" out of queries, since this is a one-person blog.</li><li>the file paths have to be changed to like "@/components", if you encounter an error</li><li>Change the .env file name to ".env.local" and ensure that the .env.local file is included in your .gitignore file.</li><li>Obtain the token and manually add it to your .env.local file.</li><li>you got the same error as mine("posts: (empty)")? -&gt; you need to remove the condition after <code>[_type == "post"]</code> in /sanity/lib/queries.ts. -&gt; <a href="https://stackoverflow.com/questions/60901903/sanity-and-nextjs-posts-not-displaying-on-index-js" target="_blank" rel="noopener noreferrer">for more information</a></li></ul> Our ./.env.local file should look like this.<pre><code>NEXT_PUBLIC_SANITY_PROJECT_ID=xxxxx
NEXT_PUBLIC_SANITY_DATASET=production

SANITY_API_READ_TOKEN=xxxxx</code></pre> Now, our blog appears in its basic layout (#1), since we have not styled it yet. http://localhost:3000/ <img src="https://images.microcms-assets.io/assets/f41677d9524145eeab50ba644801cfdb/ec01d7167adb4749bbea841cd699be18/Bildschirmfoto%202023-09-22%20um%2012.24.51.png" alt=""> http://localhost:3000/excepteur-sint-occaecat-cupidatat-non-proident (I've added two articles with dummy text) <img src="https://images.microcms-assets.io/assets/f41677d9524145eeab50ba644801cfdb/643a85d3ff434da9b4917a03cc4d2a7f/Bildschirmfoto%202023-09-22%20um%2012.23.34.png" alt=""> In the next article, we'll be enhancing the style of our blog with tailwindcss + MantineUI. Stay tuned!

How to make THIS Blog (Next.js x Sanity) step-by-step #2

Let’s make a blog like mine with Next.js(v13.4.19) + MantineUI + Sanity! The whole source code is <a href="https://github.com/taichi-de/Blog-Tutorial" target="_blank" rel="noopener noreferrer">here</a> (the branches are linked to the articles). <h2 id="hefaca90ec8">Setting Up Next.js Project</h2><pre><code>npx create-next-app@latest</code></pre> <img src="https://images.microcms-assets.io/assets/f41677d9524145eeab50ba644801cfdb/768657d1afb54cce8a119ee758fbe5c3/Bildschirmfoto%202023-09-19%20um%2011.27.36.png" alt=""> <h2 id="h88b7c2748e">Setting Up MantineUI</h2>Now we'll set up Next.js+Tailwindcss+MantineUI <pre><code>npm install @mantine/core @mantine/hooks</code></pre> <pre><code>touch Provider.tsx</code></pre> <pre><code>// in Provider.tsx
"use client";

import { MantineProvider } from "@mantine/core";
import { ReactNode } from "react";

const Provider = ({ children }: { children: ReactNode }) =&gt; {
&nbsp;return (
&nbsp;&nbsp;&lt;MantineProvider defaultColorScheme="light"&gt;{children}&lt;/MantineProvider&gt;
&nbsp;);
};

export default Provider;</code></pre> <pre><code>// layout.tsx
import Provider from "./Provider";
import "./globals.css";
import type { Metadata } from "next";
import Header from "@/app/components/Header";

export const metadata: Metadata = {
&nbsp; title: "Dev-Notes",
&nbsp; description: "made with next.js and mantineUI",
};

export default function RootLayout({
&nbsp; children,
}: {
&nbsp; children: React.ReactNode;
}) {
&nbsp; return (
&nbsp; &nbsp; &lt;html lang="en"&gt;
&nbsp; &nbsp; &nbsp; &lt;Provider&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;body className="bg-main"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Header /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;main className="mx-auto text-sub"&gt;{children}&lt;/main&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;footer className="flex items-center justify-center w-full md:h-16 sm:h-10 bg-fourth"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p className="text-xs text-center text-main/70"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Copyright © 2023 Dev-Notes | All rights reserved
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/footer&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/body&gt;
&nbsp; &nbsp; &nbsp; &lt;/Provider&gt;
&nbsp; &nbsp; &lt;/html&gt;
&nbsp; );
}</code></pre> We need 3 components files<pre><code>mkdir app/components
cd app/components
touch Header.tsx RightSidebar.tsx Icons.tsx</code></pre> <pre><code>// in Header.tsx
import Link from "next/link";
import { SiXdadevelopers } from "react-icons/si";

export const Header = () =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;div className="max-w-screen"&gt;
&nbsp; &nbsp; &nbsp; &lt;nav
&nbsp; &nbsp; &nbsp; &nbsp; className="text-center w-full p-4 shadow-sm shadow-gray/50 md:h-16 sm:h-10"
&nbsp; &nbsp; &nbsp; &nbsp; role="navigation"
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Link
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href="/"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="flex align-center justify-center font-serif text-xl text-third font-bold px-auto"
&nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;SiXdadevelopers className="mt-2 mr-2" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Dev-Notes&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;/nav&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default Header;</code></pre> <pre><code>// in RightSidebar.tsx
import Image from "next/image";
import Link from "next/link";
import { Text, Badge } from "@mantine/core";
import Icons from "./Icons";

const RightSidebar = () =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;div className="p-8 leading-loose text-center font-medium text-content bg-main w-full rounded-sm"&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="pb-4 px-auto border border-third"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Text size="lg" className="bg-third text-main"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Profile
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Image
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="my-4 mx-auto rounded-full"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="/profile1.jpeg"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={120}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={120}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="profile"
&nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2 className="text-base my-2"&gt;Hi! I&amp;apos;m Author!&lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Icons /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="text-left px-8"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis eum
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labore voluptatum accusamus odit consequatur tempore repudiandae
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dicta possimus et repellat vitae nulla eligendi animi iste
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; laboriosam, amet vero nisi.
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="my-4 pb-4 px-auto border border-third"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Text size="lg" className="bg-third text-main mb-2"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Latest Posts
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="text-left text-wrap px-4"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="hover:cursor-pointer hover:text-third"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span className="mr-2"&gt;&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href="/"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet consectetur adipisicing ...
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="px-auto border border-third"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Text size="lg" className="bg-third text-main mb-2"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tags
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="flex flex-wrap pl-2 text-left over"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Badge className="bg-secondary rounded-full mb-2 mr-2 p-2 hover:bg-blue"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Text&gt;All&lt;/Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Badge&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Badge className="bg-secondary rounded-full mb-2 mr-2 p-2 hover:bg-blue"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; No Tag
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Badge&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default RightSidebar;</code></pre> For Icons we use <a href="https://react-icons.github.io/react-icons/" target="_blank" rel="noopener noreferrer">react-icons</a><pre><code>npm install react-icons --save</code></pre> <pre><code>// in Icons.tsx
import Link from "next/link";
import { FaInstagramSquare, FaGithubSquare, FaLinkedin } from "react-icons/fa";

export default function IconIcons() {
&nbsp; return (
&nbsp; &nbsp; &lt;div className="flex items-center justify-center w-full my-2 text-center"&gt;
&nbsp; &nbsp; &nbsp; &lt;Link
&nbsp; &nbsp; &nbsp; &nbsp; href="https://www.instagram.com/"
&nbsp; &nbsp; &nbsp; &nbsp; target="_blank"
&nbsp; &nbsp; &nbsp; &nbsp; className="mr-3 bg-transparent text-third/70 hover:text-third"
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;FaInstagramSquare className="w-7 h-7" /&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;Link
&nbsp; &nbsp; &nbsp; &nbsp; href="https://github.com/"
&nbsp; &nbsp; &nbsp; &nbsp; target="_blank"
&nbsp; &nbsp; &nbsp; &nbsp; className="mr-3 bg-transparent text-third/70 hover:text-third"
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;FaGithubSquare className="w-7 h-7" /&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;Link
&nbsp; &nbsp; &nbsp; &nbsp; href="https://www.linkedin.com/"
&nbsp; &nbsp; &nbsp; &nbsp; target="_blank"
&nbsp; &nbsp; &nbsp; &nbsp; className="bg-transparent text-third/70 hover:text-third"
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;FaLinkedin className="w-7 h-7" /&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
}</code></pre> <pre><code>// in page.tsx
import { NextPage } from "next";
import RightSidebar from "./components/RightSidebar";

const Home: NextPage = () =&gt; {
&nbsp; return (
&nbsp; &nbsp; &lt;div className="grid grid-cols-12 gap-4 py-4 px-0 md:p-8 lg:w-4/5 w-full h-full text-left mx-auto"&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="lg:col-span-8 col-span-12 bg-main pt-4 px-2 rounded-sm"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="grid md:grid-cols-2 gap-4 m-4"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p className="text-xl font-bold"&gt;Latest Posts&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="col-span-12 md:col-span-6 lg:col-span-4 lg:block h-full"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;RightSidebar /&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default Home;</code></pre> <pre><code>// in tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
&nbsp; content: [
&nbsp; &nbsp; "./pages/**/*.{js,ts,jsx,tsx,mdx}",
&nbsp; &nbsp; "./components/**/*.{js,ts,jsx,tsx,mdx}",
&nbsp; &nbsp; "./app/**/*.{js,ts,jsx,tsx,mdx}",
&nbsp; ],
&nbsp; theme: {
&nbsp; &nbsp; extend: {
&nbsp; &nbsp; &nbsp; colors: {
&nbsp; &nbsp; &nbsp; &nbsp; transparent: "transparent",
&nbsp; &nbsp; &nbsp; &nbsp; gray: "#d9d9d9",
&nbsp; &nbsp; &nbsp; &nbsp; main: "#EEEBDD",
&nbsp; &nbsp; &nbsp; &nbsp; secondary: "#810000",
&nbsp; &nbsp; &nbsp; &nbsp; third: "#630000",
&nbsp; &nbsp; &nbsp; &nbsp; fourth: "#1B1717",
&nbsp; &nbsp; &nbsp; &nbsp; title: "#3f3f3f",
&nbsp; &nbsp; &nbsp; &nbsp; sub: "#7f7f7f",
&nbsp; &nbsp; &nbsp; &nbsp; content: "#4f4f4f",
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; },
&nbsp; },
&nbsp; plugins: [],
};

export default config;</code></pre> Here you can customize your colour scheme. My rec for selecting color patterns is <a href="https://colorhunt.co/palette/eeebdd8100006300001b1717" target="_blank" rel="noopener noreferrer">this web site</a>. Choose your preferred patterns! Now, our Project looks like this.<pre><code>├── README.md
├── app
│&nbsp;&nbsp;├── Provider.tsx
│&nbsp;&nbsp;├── favicon.ico
│&nbsp;&nbsp;├── globals.css
│&nbsp;&nbsp;├── layout.tsx
│&nbsp;&nbsp;└── page.tsx
│&nbsp; └── components
│&nbsp; &nbsp; &nbsp; ├── Header.tsx
│&nbsp; &nbsp; &nbsp; ├── Icons.tsx
│&nbsp; &nbsp; &nbsp; └── RightSidebar.tsx
├── node_modules
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│&nbsp;&nbsp;├── next.svg
│&nbsp; ├──&nbsp;coder-guy.jpg
│&nbsp;&nbsp;└── vercel.svg
├── tailwind.config.ts
└── tsconfig.json</code></pre> I think that concludes the current tutorial. The following tutorial will demonstrate how to set up Sanity within this Next.js project. Until next time!

How to make THIS Blog (Next.js x Sanity) step-by-step #1

In this tutorial, we will be creating an upload form that allows users to upload a file with a specific format along with an IP address. The form will be built using React, Axios, React-fook-form, zod. <h2 id="h59ed898421">Prerequisites</h2>Before we begin, you should have a basic understanding of React, HTML, and CSS. You should also have a basic knowledge of how to use the command line.<h2 id="h373c2500af"> Setting up the Project</h2>We will be using Next.js to create our project. Follow the steps below to set up the project: 1. Create a new directory for your project and navigate into it using the command line. 2. Run the following command to initialize a new Next.js project: <pre><code>npx create-next-app</code></pre> 3. Install the required dependencies using the following command: <pre><code>npm install axios @mantine/core react-hook-form @hookform/resolvers/zod zod</code></pre> 4. Install Tailwindcss by running the following commands: <pre><code>npm install tailwindcss
npx tailwindcss init</code></pre> 5. Create a `pages` directory in the root of your project and create a file named `index.tsx`. This file will contain our upload form. <h2 id="hfee0e03741">Building the Upload Form</h2>Now that we have set up our project, we can start building our upload form. We will start by importing the required dependencies and setting up the form using the `useForm` hook from `react-hook-form`. <pre><code>import { useState } from 'react';
import { useForm } from 'react-hook-form';
import axios from 'axios';
import { Button, Text } from '@mantine/core';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const validationSchema = z.object({
&nbsp;ipAddress: z
&nbsp;&nbsp;.string()
&nbsp;&nbsp;.nonempty('IP address is required')
&nbsp;&nbsp;.regex(/[0-9]{3}\.[0-9]{2}\.[0-9]{2}\.[0-9]{3}:[0-9]{2}$/i, {
&nbsp;&nbsp;&nbsp;message: 'Invalid IP address format'
&nbsp;&nbsp;}),
&nbsp;file: z.object({
&nbsp;&nbsp;name: z
&nbsp;&nbsp;&nbsp;.string()
&nbsp;&nbsp;&nbsp;.nonempty()
&nbsp;&nbsp;&nbsp;.regex(/\.cer$/i, {
&nbsp;&nbsp;&nbsp;&nbsp;message: 'Invalid file format, must have .cer extension'
&nbsp;&nbsp;&nbsp;}),
&nbsp;&nbsp;type: z.string().regex(/^application\/pkix-cert$/i, {
&nbsp;&nbsp;&nbsp;message: 'Invalid MIME type, must be application/pkix-cert'
&nbsp;&nbsp;})
&nbsp;})
});

type FormData = {
&nbsp;ipAddress: string;
&nbsp;file: FileList;
};

export default function UploadForm() {
&nbsp;const [success, setSuccess] = useState(false);
&nbsp;const [error, setError] = useState('');
&nbsp;const {
&nbsp;&nbsp;register,
&nbsp;&nbsp;handleSubmit,
&nbsp;&nbsp;formState: { errors }
&nbsp;} = useForm&lt;FormData&gt;({
&nbsp;&nbsp;mode: 'onChange',
&nbsp;&nbsp;shouldUnregister: false,
&nbsp;&nbsp;resolver: zodResolver(validationSchema)
&nbsp;});</code></pre> Next, we will create two functions for handling form submission. The first function `onSubmit` will be used to submit the form and upload the file to the server using Axios. The second function `onSubmit2` will simply log the submitted data to the console. <pre><code>&nbsp;const onSubmit = async (data: FormData | undefined) =&gt; {
&nbsp;&nbsp;try {
&nbsp;&nbsp;&nbsp;const formData = new FormData();
&nbsp;&nbsp;&nbsp;formData.append('ip_address', data.ipAddress);
&nbsp;&nbsp;&nbsp;formData.append('cer_file', data.file[0]);
&nbsp;&nbsp;&nbsp;await axios
&nbsp;&nbsp;&nbsp;&nbsp;.post('http://localhost:5000/upload', formData, {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headers: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Content-Type': 'multipart/form-data'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;.then(res =&gt; res.data);
&nbsp;&nbsp;&nbsp;setSuccess(true);
&nbsp;&nbsp;} catch (err) {
&nbsp;&nbsp;&nbsp;setError(err.message);
&nbsp;&nbsp;}

&nbsp;};

&nbsp;const onSubmit2 = (data: FormData) =&gt; {
&nbsp;&nbsp;console.log('Submitted Data', data);
&nbsp;};

&nbsp;return (
&nbsp;&nbsp;&lt;form onSubmit={handleSubmit(onSubmit2)}&gt;
&nbsp;&nbsp;&nbsp;&lt;div className="my-5"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;IP Address:&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id="ipAddress"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className="mt-2 flex h-12 w-full justify-center rounded-xl border p-3 text-blue-700 border-gray-300"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder="000.00.00.000:00"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="text"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aria-label="ipadress input"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{...register('ipAddress')}
&nbsp;&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;{errors.ipAddress &amp;&amp; (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text color="red"&gt;{errors.ipAddress.message as React.ReactNode}&lt;/Text&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)}
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&lt;div className="my-5"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;File (.cer):&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id="file"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className="mt-2 flex h-12 w-full justify-center rounded-xl border p-3 text-blue-700 border-gray-300"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type="file"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aria-label="file input"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{...register('file')}
&nbsp;&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;{errors.file &amp;&amp; (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text color="red"&gt;{errors.file.message as React.ReactNode}&lt;/Text&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)}
&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;{errors.ipAddress || errors.file ? (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;Button type="submit" variant="outline" color="indigo" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Submit
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/Button&gt;
&nbsp;&nbsp;&nbsp;) : (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;Button type="submit" variant="outline" color="indigo"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Submit
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/Button&gt;
&nbsp;&nbsp;&nbsp;)}

&nbsp;&nbsp;&nbsp;{success &amp;&amp; &lt;Text color="green"&gt;File uploaded successfully&lt;/Text&gt;}
&nbsp;&nbsp;&nbsp;{error &amp;&amp; &lt;Text color="red"&gt;{error}&lt;/Text&gt;}
&nbsp;&nbsp;&lt;/form&gt;
&nbsp;);
}

</code></pre><h2 id="ha99e1d1dc3">Conclusion</h2>This tutorial demonstrated how to create an upload form using React, Axios, React-hook-form, and zod. The form allows users to upload a file with a specific format and an IP address.By following this tutorial, you should now be able to create your own upload forms with specific file formats and IP addresses using React, Axios, React-hook-form, and Zod.

How to Create an Upload Form with React-fook-form/zod

Now that we have our basic form in place, let's move on to the server-side functionality of our application. <h2 id="h6b95081cfa">Setting up the server</h2> For our server-side functionality, we will be using `microCMS`, a headless CMS platform. We will create a new project on the `microCMS` platform and create an API key that we will use in our application.&nbsp; To get started with `microCMS`, head over to the [microCMS website](https://microcms.io/) and create a new account. Once you have created your account, create a new project by clicking on the "Create Project" button. Give your project a name and select a plan that fits your needs.&nbsp; Once you have created your project, you will be taken to the project dashboard. From here, click on the "Content Type" tab and create a new content type by clicking on the "Create Content Type" button. Give your content type a name (e.g., "Notes") and add two fields to it: "Title" and "Content".&nbsp; Next, click on the "API Keys" tab and create a new API key. Copy the API key and keep it handy, as we will be using it in our application. <h2 id="h0865e123a7">Creating the API endpoint</h2> Next, let's create an API endpoint that will handle the form data that we submit. We will use `Next.js` to create this API endpoint. First, create a new folder in your project called `pages/api`. In this folder, create a new file called `upload.js`.&nbsp; In the `upload.js` file, we will create a new `POST` API endpoint that will handle our form data. Add the following code to the file: <pre><code>import axios from 'axios';

export default async (req, res) =&gt; {
&nbsp;const { ipAddress, file } = req.body;

&nbsp;try {
&nbsp;&nbsp;const formData = new FormData();
&nbsp;&nbsp;formData.append('ip_address', ipAddress);
&nbsp;&nbsp;formData.append('cer_file', file[0]);

&nbsp;&nbsp;await axios.post(
&nbsp;&nbsp;&nbsp;'https://your-project-name.microcms.io/api/v1/notes',
&nbsp;&nbsp;&nbsp;formData,
&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;headers: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Content-Type': 'multipart/form-data',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'X-API-KEY': 'your-api-key'
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;);

&nbsp;&nbsp;res.status(200).json({ message: 'File uploaded successfully' });
&nbsp;} catch (err) {
&nbsp;&nbsp;res.status(500).json({ message: err.message });
&nbsp;}
};</code></pre> Replace `your-project-name` with the name of your `microCMS` project, and `your-api-key` with your API key. This API endpoint will receive the form data that we submit and use `axios` to send it to our `microCMS` project. If the upload is successful, we will return a success message to the client. If there is an error, we will return an error message. <h2 id="h9fcf0e3a03">Testing the application</h2> Now that we have our API endpoint set up, let's test our application. Start your `Next.js` application by running the following command in your terminal: <pre><code>npm run dev</code></pre> Once your application is running, navigate to `http://localhost:3000` in your web browser. Fill in the IP address and select a `.cer` file to upload. Click the "Submit" button. If everything is working correctly, you should see a message indicating that the file was uploaded successfully. If there was an error, you will see an error message. <h2 id="ha99e1d1dc3">Conclusion</h2> In this tutorial, we created a simple note-taking application using `Next.js`, `Axios`, `MantineUI`, `Tailwind CSS`, and `microCMS`. We created a form that allows the user to enter an IP address and upload a `.cer`

Setting up the Server-Side Functionality and Creating an API Endpoint

Finally, we will deploy the application we created. Here, we will deploy using Vercel. <h2 id="h2e350fbd84">Deploying to Vercel:</h2> 1. Create an account on Vercel and log in to the dashboard. 2. Click on "New Project" and create a project from your GitHub repository. 3. Once the project is created, Vercel will automatically deploy it. 4. After deployment is complete, access the generated URL to check if the application is working correctly. <h2 id="he82e381cfb">Post-deployment Settings:</h2> After the deployment, it's necessary to set the microCMS API key in Vercel's environment variables. Here's how you can do it: 1. From the Vercel dashboard, select the deployed application. 2. Click on "Settings" and then choose "Environment Variables". 3. Click "Add" and add the following two environment variables: <pre><code>MICROCMS_API_KEY=&lt;Your microCMS API Key&gt;
MICROCMS_API_ENDPOINT=&lt;Your microCMS API Endpoint&gt;</code></pre> 4. Save the settings. With this, the deployment of the application on Vercel and the setting of the microCMS API key are complete. <h2 id="h1ab3a7579c">Conclusion:</h2> This concludes our guide on how to create a developer's note blog using Next.js, Axios, MantineUI, Tailwindcss, microCMS, and Flask. We also discussed how to deploy the application using Vercel. With these tools, you can develop a fast and simple blog. Please give it a try and create your very own blog.

Creating a Blog with Next.js, Axios, MantineUI, Tailwindcss, and microCMS: Part 3

Next, we will implement an API using Flask. The API endpoints are /posts, which fetches blog posts, and /posts/&lt;post_id&gt;, which fetches an individual blog post. <h2 id="h1573a0b63c">Installing Flask</h2> First, install Flask. Please run the following command: <pre><code>pip install flask</code></pre> <h2 id="hd913f76bc4">Implementing the API</h2> Create a file named app.py and implement the API as follows: <pre><code>from flask import Flask, jsonify

app = Flask(__name__)

# Sample post data
posts = [
&nbsp;{
&nbsp;&nbsp;'id': 1,
&nbsp;&nbsp;'title': 'First post',
&nbsp;&nbsp;'content': 'This is my first post'
&nbsp;},
&nbsp;{
&nbsp;&nbsp;'id': 2,
&nbsp;&nbsp;'title': 'Second post',
&nbsp;&nbsp;'content': 'This is my second post'
&nbsp;},
&nbsp;{
&nbsp;&nbsp;'id': 3,
&nbsp;&nbsp;'title': 'Third post',
&nbsp;&nbsp;'content': 'This is my third post'
&nbsp;}
]

# /posts endpoint
@app.route('/posts')
def get_posts():
&nbsp;return jsonify({'posts': posts})

# /posts/&lt;post_id&gt; endpoint
@app.route('/posts/&lt;int:post_id&gt;')
def get_post(post_id):
&nbsp;post = [post for post in posts if post['id'] == post_id]
&nbsp;if len(post) == 0:
&nbsp;&nbsp;abort(404)
&nbsp;return jsonify({'post': post[0]})

if __name__ == '__main__':
&nbsp;app.run(debug=True)</code></pre> The get_posts function returns a JSON containing all the post data. The get_post function returns a JSON containing the individual post data corresponding to the post_id. If a post corresponding to the specified post_id does not exist, it returns an HTTP 404 error. <h2 id="hd615d8b2d4">Testing the API</h2> To test if the API is working correctly, send requests to the API using the curl command as follows: <pre><code>$ curl http://localhost:5000/posts
{"posts":[{"content":"This is my first post","id":1,"title":"First post"},{"content":"This is my second post","id":2,"title":"Second post"},{"content":"This is my third post","id":3,"title":"Third post"}]}</code></pre> <pre><code>$ curl http://localhost:5000/posts/1
{"post":{"content":"This is my first post","id":1,"title":"First post"}}</code></pre> With this, the implementation of the API using Flask is complete. <h2 id="ha99e1d1dc3">Conclusion</h2> This concludes our guide on how to create a developer's note blog using Next.js, Axios, MantineUI, Tailwindcss, microCMS, and Flask. With these tools, you can develop a fast and simple blog. Please give it a try and create your very own blog. I hope that helps! If you have any more questions or translations, please let me know!

Creating a Blog with Next.js, Axios, MantineUI, Tailwindcss, and microCMS: Part 2

In this article, we will explain how to create a developer's note blog using Next.js, Axios, MantineUI, Tailwindcss, and microCMS. <h2 id="h959b7a0061">Step 1: Set up Next.js</h2> First, set up Next.js. Next.js is a web framework based on React, allowing for rapid and simple development. <pre><code>npx create-next-app my-blog</code></pre> Run the above command to create a Next.js application. After that, install the necessary packages. <pre><code>npm install axios mantine @mantine/hooks tailwindcss postcss autoprefixer</code></pre> <h2 id="hd0804f7527">Step 2: Fetch data from microCMS</h2> Next, use microCMS to retrieve blog post data. microCMS is an API-based content management system that easily integrates with React applications. Below is an example of an Axios request to fetch the article data. <pre><code>import axios from 'axios'

export const getAllPosts = async () =&gt; {
&nbsp;const res = await axios.get(
&nbsp;`https://your-domain.microcms.io/api/v1/posts`,
&nbsp;{
&nbsp;&nbsp;headers: {
&nbsp;&nbsp;'X-API-KEY': process.env.API_KEY,
&nbsp;&nbsp;},
&nbsp;}
&nbsp;)
&nbsp;return res.data.contents
}</code></pre> In this code, we use Axios to fetch article data from the microCMS API. We include the API key in the headers, send the request, and retrieve the article content from the response. <h2 id="h4d29867223">Step 3: Design with MantineUI and Tailwindcss</h2> Next, use MantineUI and Tailwindcss to design the blog. MantineUI is a modern UI library for React, offering various UI components. Tailwindcss is a CSS framework that allows for simple and flexible styling. <pre><code>import { Card, Text } from '@mantine/core'
import Link from 'next/link'

const PostCard = ({ post }) =&gt; {
&nbsp;return (
&nbsp;&lt;Link href={`/posts/${post.id}`}&gt;
&nbsp;&nbsp;&lt;a&gt;
&nbsp;&nbsp;&lt;Card shadow="sm"&gt;
&nbsp;&nbsp;&nbsp;&lt;img src={post.image.url} alt={post.title} /&gt;
&nbsp;&nbsp;&nbsp;&lt;Text&gt;{post.title}&lt;/Text&gt;
&nbsp;&nbsp;&lt;/Card&gt;
&nbsp;&nbsp;&lt;/a&gt;
&nbsp;&lt;/Link&gt;
&nbsp;)
}</code></pre> In this code, we use the Card component from MantineUI to display a card for the articles and style it with a shadow using Tailwindcss. <h2 id="hd1978c66c0">Step 4: Create Pages</h2> Lastly, use Next.js to create pages. Below is an example of the article list page. <pre><code>import { getAllPosts } from '../lib/api'
import PostCard from '../components/PostCard'

const Posts = ({ posts }) =&gt; {
&nbsp;return (
&nbsp;&lt;div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"&gt;
&nbsp;&nbsp;{posts.map(post =&gt; (
&nbsp;&nbsp;&lt;PostCard key={post.id} post={post} /&gt;
&nbsp;&nbsp;))}
&nbsp;&lt;/div&gt;
&nbsp;)
}

export const getStaticProps = async () =&gt; {
&nbsp;const posts = await getAllPosts()
&nbsp;return {
&nbsp;props: {
&nbsp;&nbsp;posts,
&nbsp;},
&nbsp;}
}

export default Posts</code></pre> In this code, we use the getAllPosts function to retrieve the article data and the PostCard component to display each article in a grid layout. We also use the getStaticProps function to generate pre-built static pages. <h2 id="ha99e1d1dc3">Conclusion</h2> In conclusion, we've discussed how to create a developer's note blog using Next.js, Axios, MantineUI, Tailwindcss, and microCMS. With these tools, you can quickly and simply develop a blog. We encourage you to try creating your own blog.

Creating a Blog with Next.js, Axios, MantineUI, Tailwindcss, and microCMS: Part 1

To implement a loading function in React, you can follow these steps: 1. Create a state variable for the loading status.&nbsp; <pre><code>const [isLoading, setIsLoading] = useState(false);</code></pre> 2. Define a function that sets the loading status to true.&nbsp; <pre><code>&nbsp;&nbsp;const startLoading = () =&gt; {
&nbsp;&nbsp;&nbsp;setIsLoading(true);
&nbsp;&nbsp;};</code></pre> 3. Define a function that sets the loading status to false.&nbsp; <pre><code>&nbsp;&nbsp;const stopLoading = () =&gt; {
&nbsp;&nbsp;&nbsp;setIsLoading(false);
&nbsp;&nbsp;};</code></pre> 4. Use conditional rendering to display the loading component when the loading status is true.&nbsp; <pre><code>&nbsp;&nbsp;{isLoading &amp;&amp; &lt;LoadingComponent /&gt;}</code></pre> &nbsp;&nbsp;Here, `LoadingComponent` is a component that displays a loading spinner or any other indication that the application is loading. 5. Call the `startLoading` function before making any API requests or performing any asynchronous operations that could take some time.&nbsp; <pre><code>&nbsp;&nbsp;const fetchData = async () =&gt; {
&nbsp;&nbsp;&nbsp;startLoading();
&nbsp;&nbsp;&nbsp;const data = await fetchSomeData();
&nbsp;&nbsp;&nbsp;// Do something with the data
&nbsp;&nbsp;&nbsp;stopLoading();
&nbsp;&nbsp;};</code></pre> Here, `fetchSomeData` is a function that returns a Promise. The `startLoading` function is called before making the API request, and the `stopLoading` function is called after the data has been fetched. By implementing these steps, you can create a loading function in your React application that displays a loading indicator whenever your application is making API requests or performing any other operations that could take some time.

How to implement a loading function in react

This article explains how to create a full-stack form using Next.js, Axios, and Flask (Python). <h2 id="hbf4b51eae1">Overview</h2> A full-stack form is one that uses both frontend and backend to send and receive data. In this article, we will explain how to create a frontend using Next.js, send HTTP requests using Axios, and build a backend using Flask following these steps: <h2 id="h4f2dba8524">Step 1: Create the Frontend with Next.js</h2> First, we will create the frontend using Next.js. Next.js is a JavaScript framework based on React, making frontend creation straightforward. Here's a simple form example made with Next.js: <pre><code>import { useState } from 'react';

export default function Form() {
&nbsp;const [name, setName] = useState('');
&nbsp;const [email, setEmail] = useState('');

&nbsp;const handleSubmit = async (e) =&gt; {
&nbsp;e.preventDefault();
&nbsp;const res = await fetch('/api/form', {
&nbsp;&nbsp;method: 'POST',
&nbsp;&nbsp;body: JSON.stringify({ name, email }),
&nbsp;});
&nbsp;const data = await res.json();
&nbsp;console.log(data);
&nbsp;};

&nbsp;return (
&nbsp;&lt;form onSubmit={handleSubmit}&gt;
&nbsp;&nbsp;&lt;label&gt;
&nbsp;&nbsp;Name:
&nbsp;&nbsp;&lt;input
&nbsp;&nbsp;&nbsp;type="text"
&nbsp;&nbsp;&nbsp;value={name}
&nbsp;&nbsp;&nbsp;onChange={(e) =&gt; setName(e.target.value)}
&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&lt;/label&gt;
&nbsp;&nbsp;&lt;label&gt;
&nbsp;&nbsp;Email:
&nbsp;&nbsp;&lt;input
&nbsp;&nbsp;&nbsp;type="email"
&nbsp;&nbsp;&nbsp;value={email}
&nbsp;&nbsp;&nbsp;onChange={(e) =&gt; setEmail(e.target.value)}
&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&lt;/label&gt;
&nbsp;&nbsp;&lt;button type="submit"&gt;Submit&lt;/button&gt;
&nbsp;&lt;/form&gt;
&nbsp;);
}</code></pre> In this code, the useState hook is used to manage input values for name and email. We've also set up the handleSubmit function to make an HTTP request when the form is submitted and fetch the server's response. <h2 id="hd3c88b40be">Step 2: Send HTTP Requests using Axios</h2> Next, we'll send HTTP requests using Axios. Axios is a JavaScript library that makes it easy to send HTTP requests. Here's an example of how to send form data using Axios: <pre><code>import axios from 'axios';

const handleSubmit = async (e) =&gt; {
&nbsp;e.preventDefault();
&nbsp;try {
&nbsp;const res = await axios.post('/api/form', { name, email });
&nbsp;console.log(res.data);
&nbsp;} catch (error) {
&nbsp;console.error(error);
&nbsp;}
};</code></pre> Here, the axios.post method sends form data to the server. The code also includes error handling. Axios supports various APIs, such as RESTful API and GraphQL, and can be easily customized. <h2 id="h19d8ff7993">Step 3: Build the Backend with Flask</h2> Lastly, we'll build the backend using Flask. Flask is a web framework written in Python, typically used to create lightweight and straightforward applications. Here's an example of creating a simple API with Flask: <pre><code>from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/form', methods=['POST'])
def form():
&nbsp;name = request.json['name']
&nbsp;email = request.json['email']
&nbsp;# Do something with name and email
&nbsp;return jsonify({'success': True})

if __name__ == '__main__':
&nbsp;app.run(debug=True)</code></pre> This code sets up a Flask application and creates an /api/form endpoint that processes POST requests. It extracts the name and email from the request body, performs some actions, and then returns a JSON response. <h2 id="ha99e1d1dc3">Conclusion</h2> In summary, we've explained how to create a full-stack form using Next.js, Axios, and Flask. Using these technologies, you can easily build web applications that encompass both frontend and backend. For detailed implementations at each step, please refer to the official documentation.

Creating a Full-Stack Form with Next.js, Axios, and Flask (Python)

<h2 id="h7b5a2c9d29">Hi, I'm Taichi.</h2> I'm studying computer science in Augsburg, Germany. I'm also working part-time at a German IT company. <h2 id="hb2776f5af8">A brief history</h2> While studying at a university in Akita, I studied abroad in Germany for a year, just as a gap year. This experience became a turning point in my life and I decided to return to Germany after graduation. After returning to Japan after the gay year, I spent a year completing and submitting my thesis. Then I worked for three months at a famous onsen ryokan to save up money and finally returned to Germany. Since arriving in Germany, I've been working on improving my German to a level where I could enroll in a university. At the same time, I've been self-taught in frontend web development. <h2 id="h8cb8f3908a">About this blog</h2> The reason I started this blog is because I learned the benefits of sharing my experiences through a blog, such as being able to organize my thoughts, meeting like-minded strangers and expanding my network of friends, and being able to refer back to my organized thoughts through links at any time. I've read a lot of blogs over the years and they've helped me a lot. "I wonder if the information I take for granted might be useful to someone else." "There may be people whose worlds are expanded by my experience and way of thinking." It is with these hopes in mind that I want to continue writing.

Hi! I'm Taichi