To change the port on a Next.js

To change the port on a Next.js application, you can specify the PORT environment variable when running the development server. Here's how to do it:

Method 1: Using package.json Scripts

If you use npm or yarn, you can modify the dev script in your package.json to specify a different port.

  1. Open your package.json.
  2. Locate the scripts section and modify the dev script to include the -p or --port option followed by the desired port number.

For example, to use port 4000:

"scripts": {
  "dev": "next dev -p 4000",
  "build": "next build",
  "start": "next start"
}

Now, running npm run dev or yarn dev will start your Next.js app on port 4000.

Method 2: Using Environment Variables

You can also set the port using an environment variable:

  1. Create a .env.local file in the root of your project (if it doesn’t exist).
  2. Add the following line to specify the desired port:
PORT=4000

Next.js will read this environment variable and start the app on port 4000 when you run the dev script.

Method 3: Setting Port Directly in the Command Line

If you want to quickly start your Next.js app on a custom port without modifying any files, you can do it directly in the command line:

PORT=4000 npm run dev

or if you're using yarn:

PORT=4000 yarn dev

This will override the default port for that specific run.

Summary

  • Modify the dev script in package.json with next dev -p <port>.
  • Alternatively, set the PORT in .env.local or directly in the command line.

Let me know if you need further clarification!

댓글

댓글 쓰기

이 블로그의 인기 게시물

Using the MinIO API via curl

Using the MinIO API via curl is straightforward, as MinIO is compatible with Amazon S3 API, so most commands follow a similar syntax. Here’s a guide on how to use curl with the MinIO API for some common operations like uploading, downloading, and managing objects. Prerequisites Access Key and Secret Key : Obtain your MinIO Access Key and Secret Key. MinIO Endpoint : Know your MinIO server endpoint, e.g., http://localhost:9000 . Bucket : You may need an existing bucket name, or create a new one using the commands below. Authentication Header For requests to work with MinIO, you need to include authentication in the headers. MinIO uses AWS Signature Version 4 for signing requests. Common Examples 1. List Buckets To list all buckets in your MinIO account, use: curl -X GET \ - -url "http://localhost:9000/" \ - H "Authorization: AWS <AccessKey>:<Signature>" 2. Create a Bucket To create a new bucket, use: curl -X PUT \ - -url "htt...
자세한 내용 보기

How to split a list into chunks of 100 items in JavaScript, 자바스크립트 리스트 쪼개기

To split a list into chunks of 100 items in JavaScript, you can create a function that loops through the list and slices it into smaller subarrays of size 100. Here’s how you can do it: Example Code: function splitListBy100( array ) { const chunkSize = 100 ; const result = []; for ( let i = 0 ; i < array .length; i += chunkSize) { result .push( array .slice(i, i + chunkSize)); } return result ; } // Example usage: const myArray = [... Array ( 350 ).keys()]; // Creating an array of numbers from 0 to 349 const chunks = splitListBy100(myArray); console.log(chunks); Explanation: chunkSize : Defines the size of each chunk, which in this case is 100. for loop : Iterates over the array, incrementing the index by 100 each time. array.slice(i, i + chunkSize) : Extracts a chunk from the array starting from index i and ending at i + chunkSize . result.push() : Adds the chunk to the result array. The function returns an array of arrays (...
자세한 내용 보기

HTML Inline divisions at one row by Tailwind

To arrange a **variable number of inline ` ` elements in a row** using **Tailwind CSS**, you can utilize several approaches, depending on your layout needs. Below are some common methods to align multiple divs in a row: ### 1. **Using Flexbox (`flex`)** Tailwind's `flex` utilities provide a straightforward way to align a variable number of ` ` elements inline in a row. Flexbox will ensure that they stay in a row, wrapping if necessary. #### **Example Using Flexbox** ```html Div 1 Div 2 Div 3 Div 4 ``` #### **Explanation:** - `flex`: Puts the child elements (the divs) in a row. - `flex-wrap`: Ensures that if there are too many divs to fit in one row, they will wrap to the next line. - `space-x-4`: Adds horizontal spacing between the divs (adjust as needed). ### 2. **Using Grid (`grid`)** Another way to align divs in a row is by using Tailwind's `grid` utilities. Grid layouts are very flexible and allow control over the number of columns. #### **Example Using ...
자세한 내용 보기

Boilerplate for typescript server programing

Here are some recommended boilerplates and frameworks for TypeScript server programming, depending on your requirements: 1. NestJS (Highly Recommended for Enterprise-Grade Applications) NestJS is a progressive Node.js framework built with TypeScript. It provides an opinionated structure and is excellent for building scalable and maintainable server-side applications. Features : Dependency injection Modular architecture Built-in support for WebSockets, GraphQL, REST APIs Easy integration with tools like Swagger, TypeORM, and Mongoose Getting Started : Install Nest CLI: npm i -g @nestjs/cli nest new project-name Boilerplate is automatically generated with ready-to-use configurations for controllers, services, and modules. Website : https://nestjs.com/ 2. Express with TypeScript Express.js is lightweight and minimal, making it ideal for developers who prefer flexibility over opinionated frameworks. Boilerplate : You can start with an official or community-maintai...
자세한 내용 보기

가속도 & 속도

F = ma 에서 가속도(( a ))는 속도(( v ))의 시간(( t ))에 대한 미분이므로, 수식으로 표현하면 다음과 같습니다. \[a = \frac{dv}{dt}\] 또한, 속도(( v ))는 위치(( x ))의 시간 미분이므로, 이를 포함하여 가속도를 표현하면 \[a = \frac{d}{dt} \left( \frac{dx}{dt} \right) = \frac{d^2 x}{dt^2}\] 즉, 가속도는 위치의 이阶 미분(두 번째 미분)입니다.
자세한 내용 보기

Gradle multi-module project

In a Gradle multi-module project , it's common to define shared dependencies in the parent project (root project) to avoid duplication across modules. This structure allows child modules to inherit or access those dependencies. Below are some best practices on how to correctly share dependencies between parent and child modules in a multi-module Gradle project . Project Structure Example multi-module-project/ ├── build .gradle .kts (Parent/root project) ├── settings .gradle .kts ├── module-a/ │ └── build .gradle .kts ├── module-b/ │ └── build .gradle .kts Step 1: Configure settings.gradle.kts In a multi-module project, the settings.gradle.kts file should declare all the modules that are part of the build. // settings.gradle.kts rootProject .name = "multi-module-project" // Include child modules include ( "module-a" , "module-b" ) Step 2: Define Shared Dependencies in the Parent build.gradle.kts The root build.gradle.kts ca...
자세한 내용 보기

How to checkout branch of remote git, 깃 리모트 브랜치 체크아웃

To check out a branch from a remote Git repository, you can follow these steps: 1. Fetch the remote branches First, ensure that your local repository is aware of the remote branches by using git fetch . This updates your local references to the remote branches. git fetch origin 2. Check out the remote branch Once the remote branches are fetched, you can check out the desired branch using git checkout -b and specifying the remote branch. Command: git checkout -b < local -branch- name > origin/<remote-branch- name > Explanation: <local-branch-name> : The name you want to give to your local branch. origin/<remote-branch-name> : Refers to the branch on the remote called origin (which is the default name for the main remote repository) and the branch you want to check out. Example: If the remote branch is called feature-branch and you want to create a local branch with the same name, you would run: git checkout -b feature -branch origin / feature -...
자세한 내용 보기

CDPEvents in puppeteer

In Puppeteer , CDPEvents refers to events emitted by the Chrome DevTools Protocol (CDP) . Puppeteer leverages CDP to interact with and control a Chromium-based browser. CDP provides detailed, low-level access to browser internals, such as network traffic, console logs, page lifecycle events, and more. You can listen to these CDP events through Puppeteer’s API to monitor or intercept browser activity. How to Listen for CDP Events in Puppeteer Enable the Required CDP Domain: Some events require enabling a particular domain (e.g., 'Network' , 'Page' , 'Runtime' ). Use page._client() to Access the CDP Session: Although it’s a bit lower-level, Puppeteer allows access to DevTools through the page._client() API. Example: Listening for Network Requests This example demonstrates how to intercept and log network requests using CDP. const puppeteer = require( 'puppeteer' ); ( async () => { const browser = await puppeteer.launch({ headless...
자세한 내용 보기

Sparse encoder

A Sparse Encoder refers to a variant of neural network architectures where sparsity is introduced in the encoding process. This can mean either: Sparse Input Representations : The input features to the encoder are sparse (many values are zero). Sparse Output Representations : The encoder is designed to produce sparse outputs where most of the encoded feature values are zero. Sparse encoders are often used to improve model interpretability, efficiency, and generalization. They can be applied in various contexts, including traditional neural networks, autoencoders, and even transformer-based models. Key Characteristics of Sparse Encoders Sparsity in Representations : The model learns a feature representation where only a subset of neurons is active for a given input. This mimics how biological neurons operate, promoting interpretability and reducing noise in representations. Reduced Computational Cost : Sparse operations often result in lower computational overhead since...
자세한 내용 보기

Reactjs datetime range picker

To create a datetime range picker in React, you can use a library such as react-datetime-range-picker . This library provides a customizable date and time range picker component that you can easily integrate into your React application. Here's an example of how you can use it: Install the library using npm or yarn: npm install react-datetime- range -picker Import the necessary components into your React component: import React, { useState } from 'react' ; import DateTimeRangePicker from 'react-datetime-range-picker' ; Create a state to hold the selected date and time range: const [selectedRange, setSelectedRange] = useState({ startDate: null , endDate: null }); Render the DateTimeRangePicker component and handle the selection changes: ```jsx const handleRangeChange = (range) => { setSelectedRange(range); }; return ( ); ``` In the example above, the DateTimeRangePicker component is rendered with the onChange event handler and th...
자세한 내용 보기