J World

Setting up i18n (Internationalization) in a Next.js application using the App Router (as opposed to the Pages Router) allows you to offer a multi-language experience to your users. Here’s a step-by-step guide on how to configure i18n in your Next.js app. Step 1: Install Necessary Packages To get started, install the following packages: npm i @formatjs/intl-localematcher negotiator @types/negotiator These packages help with locale negotiation, allowing the app to detect and use the user’s preferred language settings. Step 2: Set Up Dynamic Route for Language Create a [lang] Directory: To handle dynamic routing by language, create a new directory named [lang] within your app directory. Move Components to [lang] : Move all components and pages in your app into app/[lang] . This change enables dynamic language routing, where lang can represent language codes like en , ko , or jp . Step 3: Create Middleware for Language Detection Within the app directory, create a middleware.ts ...

When working with Next.js and Redux, there are times you’ll want to ensure an action is fully completed before redirecting the user. This is especially true in authentication flows: after a successful login, you’ll want to redirect to the home page, but only if the login completes without any issues. In this post, we’ll explore how to handle this scenario using Redux Toolkit’s unwrap function. We'll look at how it helps manage async actions, allowing us to control navigation based on the result of a dispatched action. Why the Problem Exists In traditional client-side apps, actions like login often require an asynchronous request to an API, and we rely on Redux to handle these actions. In Next.js, navigating from one page to another uses router.push() , which executes immediately if called. This can cause routing to happen before the login action finishes, potentially leading to redirecting users even if the login failed. To avoid this, we need to await the login action, ensuring ...

Deploying applications to Google Cloud Run can often feel smooth, but every now and then, something comes up that throws a wrench in your deployment. One of the more puzzling errors I encountered recently was: “Revision ‘[revision-name]’ is not ready and cannot serve traffic. The user-provided container failed to start and listen on the port defined by the PORT=8080 environment variable within the allocated timeout.” In this post, I’ll share the steps I took to troubleshoot this error, what I learned about how Google Cloud Run handles container startups, and how you can make sure your container starts reliably. The Error Breakdown This error essentially points to two possible issues: Port Misconfiguration: The application isn’t listening on the expected port, which, for Cloud Run, is set by default to PORT=8080 . Timeout Exceeded: The container didn’t start within the default time limit, causing Cloud Run to terminate the attempt. I’ll walk through the steps I used to investigate and...

When building a Next.js app for mobile, I faced a common issue — testing the app on my phone while it’s running on localhost on my development machine. Trying to access localhost directly from my phone didn't work. Here's how I solved it using ngrok . The Problem When I tried accessing my localhost from my mobile phone’s browser or app, it simply didn’t connect. Since localhost is specific to your computer, devices on the same network, like your mobile phone, can’t access it directly. I needed a way to expose my development server to external devices. The Solution: Using ngrok I remembered using ngrok in a similar situation to expose my local development environment to the web. Here’s how I did it: Step 1: Install ngrok Since I was on a new laptop, ngrok wasn’t installed yet. If you’re in the same situation, you can easily install ngrok by heading to ngrok’s website and downloading it for your operating system. Once installed, unzip the file and move ngrok to your /usr/l...

I recently faced an unexpected error while working on two different projects that pointed to the same API backend server built with Nest.js . One project was a Next.js app designed for mobile users, while the other was a Node.js app for handling Arduino hardware . Everything was running smoothly with the mobile user service until the following error popped up for the Arduino integration: - BadRequestException : Bad Request Exception - ~ /node_modules/ @nestjs /common/pipes/validation. pipe . js in ValidationPipe . transform at line 74 : 30 - ~ /node_modules/ @nestjs /common/pipes/validation. pipe . js in ValidationPipe . exceptionFactory at line 101 : 20 At first glance, I had no idea what could be causing this error since everything worked fine for the mobile service. Both apps were using the same backend, so why was only the Arduino app encountering this? Digging Deeper I started investigating, trying to determine what might be wrong. Since the error was triggered in Nest.j...

If you’ve built an app that uses react-native-iap for handling subscriptions on iOS and Android, you might be wondering how users can cancel their subscriptions. Managing subscriptions is crucial, especially if you’re offering premium features or content that users access via recurring payments. In this post, I’ll walk through the steps to allow users to cancel their subscriptions, and explore whether you should store and manage user subscription data in your own database. How to Allow Users to Cancel Subscriptions 1. Direct Users to App Store and Google Play First and foremost, you cannot directly cancel subscriptions from within your app . Both Apple and Google Play handle the billing process, including cancellations, and users must go through their respective app store’s subscription management interface to cancel their subscriptions. For iOS (Apple App Store): You can redirect users to the iOS subscription management screen using the following link: import { Linking } from ...

Introduction When developing a location-based app in React Native using Expo, you’ll often need to decide how to get the device’s location. The Expo Location API provides two methods: getCurrentPositionAsync and getLastKnownPositionAsync . Although they may seem similar, they serve different purposes and can significantly impact your app's behavior. In this article, we'll dive into the differences, explore their use cases, and discuss when to use each method. What are getCurrentPositionAsync and getLastKnownPositionAsync ? getCurrentPositionAsync This function retrieves the current GPS location of the device by actively querying the hardware, such as the GPS, Wi-Fi, or cellular network. It can take a few seconds to complete, depending on factors like signal strength and the device’s location. The function will always provide the most accurate and up-to-date location, making it suitable for apps requiring real-time tracking. getLastKnownPositionAsync This function retrieves th...

  I recently spent an exhausting amount of time trying to get Google Play subscriptions to work with my React Native app using the react-native-iap library. Surprisingly, setting up subscriptions for iOS was relatively straightforward, but Android proved to be much more challenging. Initially, I expected iOS to be more difficult to configure, considering Apple’s well-known strict rules and regulations. However, I was totally wrong. Although some of the hurdles I faced were due to my own unfamiliarity with Google Play’s subscription setup process, the experience was frustrating. I want to share my journey in the hopes that it saves others some time. The Battle Begins: Offer Tokens and Testers My first issue was with the offerToken . On iOS, subscriptions worked fine without any additional setup for offer tokens. But on Android, I kept encountering problems, which led me to spend a lot of time googling solutions and trying different approaches. After some research, I learned th...

Recently, after updating Xcode and the iOS simulator, I encountered a frustrating error when trying to run my project: Loaded CoreSimulatorService is no longer valid for this process. Simulator services will no longer be available. Error=Error Domain=NSPOSIXErrorDomain Code= 61 "Connection refused" UserInfo={NSLocalizedDescription=CoreSimulator.framework was changed while the process was running. This is not a supported configuration and can occur if Xcode.app was updated while the process was running. Service version ( 987.2 ) does not match expected service version ( 987 ).} If you’ve run into this error, you’re probably aware that it can be confusing and disruptive to your workflow. Here’s a quick guide on how I resolved it and got my environment back on track. Why This Happens This error typically shows up after updating Xcode or the iOS Simulator. In this case, CoreSimulator services are no longer in sync with the newly updated versions, which leads to a bre...

I Get the Error: “Google Api Error: Invalid request — Version code 1 has already been used” As I was submitting my React Native Expo app to the Google Play Store, I encountered an error that stopped me in my tracks: Google Api Error : Invalid request - Version code 1 has already been used I’ve submitted updates to the Play Store before, so I didn’t expect this issue. Everything seemed to be working fine, and I hadn’t made any changes to the versioning (or so I thought!). But this time, the build process failed due to a version code conflict. What Is the “Version Code” in Android Apps? When you submit an Android app to the Google Play Store, each version of your app must have a unique version code . This version code is an integer that must be incremented with every new release of your app, regardless of whether the version name (e.g., 1.0.0 ) stays the same. For example, the version code is a simple number like 1 , 2 , 3 , etc., and each time you submit a new build, this...