## Things to do

Normally, in order to get the id 1 in Next.js dynamic routing (post/1), you can write the following to get the value.

```js
const { id } = router.query;
```

How do I get this in getServerSideProps?

```js
export async function getServerSideProps(context) {
```

You can do the following to get it.

```js

export async function getServerSideProps(context) {
const { id } = context.query;
```

## Reference.

[Dynamic routing with getServerSideProps in Nextjs](https://stackoverflow.com/questions/61222726/dynamic-routing-with- getserversideprops-in-nextjs)

[How to get the id of dynamic routing with getServerSideProps in Nextjs](https://off.tokyo/blog/dynamic-routing-with-getserversideprops-in-nextjs/)


Nowadays, webya app developers need the best tools to get the job done.

The digital world is growing, and with it comes a high demand for new websites, applications and software.

Developers and programmers must create web content and resources that are easier to use, but also easier to manage if they have the right tools.

With that in mind, let’s explore the top React development tools for 2021.

We’ll start with a brief introduction to React, explain what developer tools are, why they’re important, how to use React developer tools, and finish with a list of the top tools…


Web media for tech lovers | off.tokyo

I started to make a service for skill-sharing in 2020, but it was completely neglected.

But I’ve recently started developing it again.

It seems that my passion for the market of person-to-person trading hasn’t been crushed yet.

Well, that’s not really the point…

A lot of code was stuck, and the Stripe area wasn’t working anymore.

What I’m trying to do is a C2C service that allows you to verify a user’s identity when transferring sales to their account.

I need to verify the identity of the user.

We need the address, the…


off.tokyo, the web media for high-tech lovers

Amazon Lightsai has the ability to get WordPress up and running in an instant for about $3.5/month.

There are no cumbersome contracts, no admin screens, and no contracts because you can turn off the instance as soon as it is no longer needed.

It’s very convenient and cheap, and I’ve used it quite a bit to set up multiple WordPress media.

I’ve been using Amazon Lightsail for a long time now, but I’m thinking that running WordPress on Amazon Lightsail is a bad idea if you’re not careful about the risk of the…


How to receive images with the node.js API | fetch , React — off.tokyo, the web site for high-tech enthusiasts

what i did

The front side is built with React, and the form data is sent to the api by post using JavaScript fetch.

Then, the api receives the form data and saves the data to the server.

To edit the user’s information, imagine that the user has to register his name and driver’s license (back and front) with the service, and look at the code.

node.js console.log

In the following log, the form data created on the front side is received by post to…


What is logical deletion and physical deletion? | off.tokyo

What is logical deletion?

Logical deletion is the process of not actually deleting the data,

but setting a column called “flag” to make it appear as if the data has been deleted to the user.

For example, if you have a tweets table

For example, if you have a tweets table, you can add a boolean column called deleted_flag to the table.

In this state, the default value of the deleted_flag column is null.

In this way, when a user presses the delete button of a tweet,

the deleted_flag will be set to 1, and…


This time I used call, fork, put, take, and select.

  • call: Wait for the promise to finish. The argument should be a function that returns a promise.
  • fork: Start another task. The argument can be an asynchronous function starting with *function*.
  • put: Dispatch an action.
  • take: wait for an action, an event to occur, and take as argument a string that is not a function of the action, but an action.type.
  • select: select data from a state, taking a function that takes a state as an argument.

When importing, use

import { call, fork, put, take, select } from 'redux-saga/effects'.


The 2017 macOS and iOS updates include a version of Safari that implements the CSS Grid Layout Module,

which is finally available in all modern browsers.

It’s a very flexible and intuitive way to represent grids. In today’s post, I’d like to study this again.

(Note that this article is based on a Japanese article and only the necessary points have been translated.

https://qiita.com/morishitter/items/738488290451555d913c

Defining the Grid

When you want an element to be laid out in a grid, you need to specify display: grid or display: inline-grid for its parent element.

This parent element is called the grid container, and the child…


source : Writing Iterator and Generator using JavaScript | off.tokyo

Iteration is the foundation of programming. The degree to which a programming language helps you iterate makes a big difference in your programming comfort.

JavaScript has been a lagging language when it comes to iteration. However, with the introduction of Iterator and Generator, this is about to change.

Iterator

Itreable and Iterator

In JavaScript, an object that can be iterated over is called an iterable, and typical examples of iterables are Arrays and Maps. A typical example of an Iterable is an Array or Map, which is iterable because it has multiple values.

An…


Iterators and generators are a big feature of ECMAScript 6 (released in June 2015 and still relatively new to JavaScript).

And It’s a huge, complex system, and complicated.

So In this article, I’d like to explain iterators in a way that you can understand them step by step.

[source : Understanding JavaScript iterators | off.tokyo]

What is an Iterator Result?

An iterator is an object from which iterator results can be retrieved in order.

Specifically, an object that satisfies the following two points is called an iterator.

  • It must have a .next() method
  • When .next() is executed, it returns the iterator result.

In other words…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store