My Nextjs testing arena

Pinned:

• Examples: https://nextjs.org/examples
• Showcase: https://nextjs.org/showcase

Using expressjs with nextjs?

• sahilrajput03/expressjs-vercel-example (latest attempt to run it, please read the readme of the project)
• sahilrajput03/nextjs-examples-testing/tree/master/custom-server-express

Using turbo pack in next 13 for testing extremely fast bundling

Q. Why turbopack and not webpack?

Ans. Becoz creator of webpack works @ verce itself and he's hepling to make turbopack better along with the learnings of webpack.

Source: What is Turbopack? by Vercel: Click here

"dev": "next dev --turbo",

ClientOnly

import React from 'react'

export default function ClientOnly({children, ...delegated}) {
	const [hasMounted, setHasMounted] = React.useState(false);
	React.useEffect(() => {
		setHasMounted(true);
	}, []);
	if (!hasMounted) {
		return null;
	}
	return <div {...delegated}>{children}</div>;
}

router, routing, etc

1 - https://nextjs.org/docs/api-reference/next/router 2 - https://nextjs.org/docs/routing/introduction

Using bootstrap v5 in nextjs

Source: Click here

// Adding bootstrap to nextjs project? Source: https://dev.to/anuraggharat/adding-bootstrap-to-nextjs-39b2
// Step1: Install bootstrap: `npm i bootstrap` to nextjs project.
// Step2: Add `import 'bootstrap/dist/css/bootstrap.css'` to `_app.js` file.
// Step3: Add `useEffect(() => {import('bootstrap/dist/js/bootstrap')}, [])` to `_app.js` file.

To make absolute imports work in vscode you must have this

After doing that vscode should no longer complain about module not found like errors. ~Sahil

Using react context in nextjs

Source: Netlify Article

Running browser specific code should go in onMount effect like that:

Using <Image /> component in nextjs TAKE: FINAL, 4 Sep, 2022

• How to use Image comp?:

  

• Why you should use Image component in nextjs:

  • sourc1: https://youtu.be/ZRZngn_GdXY
  • source2: https://youtu.be/h0gj4gOjz44

• TLDR:

  • It provides lazy loading i.e., only the images on the screen are loaded and subsequent are loaded on scroll.
  • Images are converted to webp format (optimized for web) automatically thus extremely reduced size of images
  • fixes layout shifts as well

Css modules are actually good (setup by default)

Why css modules? Amzing article by css-tricks: https://css-tricks.com/css-modules-part-1-need/

Best/Only possible way to apply styles to Image components of Nextjs

using environment variables with nextjs

Source: nextjs docs

next-auth

src: Authentication: It’s Easier Than You Think

most probably in nextauth IMO:

Redirect to /login page if you are not logged in:

Thats how you get query parameter in nextjs

We can change port for nextjs development server like that

Runtime Checking development and production mode in nextjs

You can only give height, width to an nextjs <Image /> tag like that:

*Disclaimer: width and height property given directly to <Image height='' width='' /> doesn't work in my experience. ~Sahil

YO! We can run multiple debugger i.e,. frontend and backend

• Use useSWR in nextjs (23k* on github):

ALERT: PLEASE USE react-query instead of this

• Making use of client side libraries to work with nextjs setup source:

Next.js

• create-next-app - Github, Article in Docs
• Official Next.js examples - Github
• Example : api-router - Github, Article in Docs
• Example : with-expo-typescript - Github.
• To create a nextjs ready apps, follow below examples commands -

# For npm users-
npx create-next-app my-next-app # It uses yarn by default to install dependencies. LOL 🍉
npx create-next-app --example api-routes api-router-app
npx create-next-app --example with-expo-typescript with-expo-typescript-app

Commmon Commands - Sahil Rajput

nd - To run dev server i.e., npm run dev which runs next dev.

Now, you can browse your server(with webpack-fast-refresh enabled) at http://localhost:3000

Make the production build first via below command

1. npm run build which runs next build.

2. ns - To serve producton build via npm start which runs next start. (Note: )

If you want a static build you can use:

nr build:export - To make a static build of the app in out directory. (next build && next export)

---

Other Details

Tip: You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

• Next CLI - Docs

• Next.js Docs

• Next.js - Getting Started, #Manual Setup

• Basic Features - Pages

• Routing - Dynamic Routes

• Built-In CSS support - Docs

• Learn Next.js - Next.js Docs

• Static Html Export - Article - Next.js Docs

• Deploy your Next.js app to Vercel Platform (from the creators of Next.js)

• Next.js deployment documentation - Next.js Docs - Nextjs Deployment Documentation

• See amazing resources for nextjs @ https://github.com/unicodeveloper/awesome-nextjs

Some yarn related commands

$ next -h
Usage
  $ next <command>

Available commands
  build, start, export, dev, telemetry

Options
  --version, -v   Version number
  --help, -h      Displays this message

For more information run a command with the --help flag
  $ next build --help

# For yarn users-
yarn create next-app my-next-app # Where my-next-app would be name of project.
yarn create next-app --example api-routes api-router-app
yarn create next-app --example with-expo-typescript with-expo-typescript-app

yarn dev
yarn start

Disable ssr on nextjs page

Source: https://stackoverflow.com/a/53191080/10012446

Building SPA with nextjs and react-router-dom: Amazing Article