Tag
nextjs
Published articles tagged nextjs.
API Routes and middleware in NextJS
API Routes let you create an API endpoint inside a Next.js app. An endpoint that shall be available at localhost:3000/api/hello must have a file pages/api/hello.js with the following content:
Customizing App, Document and Error Pages in NextJS
Next.js uses the App component to initialize pages. You can override it creating a ./pages/_app.js file if, for example. you want to do some of the following things:
Deploying a NextJS app
next build builds the production application in the .next folder. After building, next start starts a Node.js server that supports hybrid pages , serving both statically generated and server-side…
Environment variables in NextJS
Next.js has built-in support for loading environment variables from .env.local into process.env .
Handling images and other assets in NestJS
Files inside public can be referenced from the root of the application. That is useful to serve static assets like robots.txt and images. For example, if you add an image to public/me.png , the…
Installing NextJS
As of december 2022 you need node version 14.6 or later to run NextJS.
Next CLI
// Start the application in development mode (hot-code reloading, error reporting, etc) next dev next dev mydir -p 8080 // build application in current directory's .next folder next build next build…
Pages, Routing and Navigation in NextJS
In Next.js, a page is a React Component exported from a file ( .js , .jsx , .ts , or .tsx ) in the pages directory . The component can have any name, but you must export it as a default export.
Rendering and data fetching in NextJS
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. This…
Styling in NextJS
Next.js allows several possibilities for styling:
Testing with Jest in NextJS for TypeScript
Add to package.json :
Using NextJS with TypeScript
Create an empty tsconfig.json file in the root of your project and add dependencies:
Debug NextJS with Nx in Jetbrains
Creating a debug session for NextJS within a Nx workspace is not an easy straightforward task as this NX issue shows (after two years the issue is still open). Solutions are mentioned for VSCode, but…
Firestore with NextJS
Cloud Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs.