As of december 2022 you need node version 14.6 or later to run NextJS. Automatic installation What we will get is Manual installation For a manual setup have a look at the official docs page. Installation using Nx Find more commands on the Nx NextJS plugin doc page.

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. Pages for static routes Pages for dynamic routes Sometimes routes have dynamic segments, for example if the route uses […]

Rendering strategies 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 process is called hydration. How hydration works Hydration is the process by which React “attaches” to existing HTML that was already […]

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 following code will access the image: Note: Be sure to not have a static file with the same name as a file […]

Next.js allows several possibilities for styling: To load global CSS files, create a file called pages/_app.js and import styles/global.css for example: This App component is the top-level component which will be common across all the different pages. You can use this App component to keep state when navigating between pages, for example. You cannot import […]

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 none for Jetbrains IDE. This article describes how to enable Server-Side NextJS debugging in a Nx managed monorepo using Breakpoints […]

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: To handle different HTTP methods: Dynamic API routes API routes support dynamic routes, and follow the same file naming rules used for pages. For example, the […]

Next.js has built-in support for loading environment variables from .env.local into process.env. By default all environment variables loaded through .env.local are only available in the Node.js environment, meaning they won’t be exposed to the browser. In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_ Note: .env, .env.development, […]

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: The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Customizing Document You can create a ./pages/_document.js […]

Create an empty tsconfig.json file in the root of your project and add dependencies: Now run yarn dev to start the server and Next.js will: Here is how you use the types: This is how you use API Routes with TypeScript: You can convert pages/_app.js into pages/_app.tsx and use the built-in type AppProps, like so:

Add to package.json: Add to .eslintrc.json: Add to .babelrc: Create jest.config.js Create jest.setup.ts

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 rendered pages. According to the makers of Next.js, the easiest way to deploy Next.js to production is to use the Vercel platform developed by the creators of […]

Cloud Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs. Initialize Cloud Firestore Get Firebase configuration from web console and then use it to initialize the app in your web frontend: A collection contains documents and nothing else. Documents contain data as property-value pairs. The […]