Nextjs Templates overview

Environment Variables Example

link

it shows how you have access to public env variables prefixing your variables with NEXT_PUBLIC_
https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

Fast Refresh Demo

link

Flexing about Fast Refresh

Next page-transition Example

link

it uses react-transition-group
the key is to wrap the whole app with a PageTransition component in the _app.js file
there's also this other example using framer-motion, which seems more up to date

Example app implementing progressive server-side render

link

features
- A custom hook called useMounted, implementing this behavior
- An app with a component that must only be rendered in the client
- A loading component that will be displayed before rendering the client-only component
is creates a useMounted custom hook, that just runs useEffect with no deps

Redirects

link

you can setup redirects in the next.config.js file

1module.exports = {
2  // Uncomment the line below to enable basePath, pages and
3  // redirects will then have a path prefix (`/app` in this case)
4  //
5  // basePath: '/app',
6
7  async redirects() {
8    return [
9      {
10        source: "/team",
11        destination: "/about",
12        permanent: false,
13      },
14      // Path Matching - will match `/old-blog/a`, but not `/old-blog/a/b`
15      {
16        source: "/old-blog/:slug",
17        destination: "/news/:slug",
18        permanent: false,
19      },
20      // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b`
21      {
22        source: "/blog/:slug*",
23        destination: "/news/:slug*",
24        permanent: false,
25      },
26      // Regex Path Matching - The regex below will match `/post/123` but not `/post/abc`
27      {
28        source: "/post/:slug*",
29        destination: "/news/:slug*",
30        permanent: false,
31      },
32    ]
33  },
34}

Using Preact

link

no react installed

1// package.json
2{
3  "name": "using-preact",
4  "version": "1.0.0",
5  "scripts": {
6    "dev": "next",
7    "build": "next build",
8    "start": "next start"
9  },
10  "devDependencies": {
11    "react-refresh": "^0.8.3"
12  },
13  "dependencies": {
14    "@prefresh/next": "^0.3.0",
15    "next": "^9.4.0",
16    "preact": "^10.4.4",
17    "preact-render-to-string": "^5.1.9",
18    "react": "github:preact-compat/react#1.0.0",
19    "react-dom": "github:preact-compat/react-dom#1.0.0",
20    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1"
21  },
22  "license": "MIT"
23}

very important the next.config.js config.

Next SEO

link

NextSeo is a component
https://github.com/garmeeh/next-seo

Prefetching

link

1<Link prefetch={false} href="/about">
2  <a
3    onMouseEnter={() => {
4      router.prefetch("/about")
5      console.log("prefetching /about!")
6    }}
7  >
8    About
9  </a>
10</Link>

With route as modal

link

uses react-modal
it renders the modal in the home page, and it has a conditional if the route is different to show/hide

1// pages/index.js
2
3import { useRouter } from "next/router"
4import Modal from "react-modal"
5import Post from "../components/Post"
6import Grid from "../components/Grid"
7
8Modal.setAppElement("#__next")
9
10const Index = () => {
11  const router = useRouter()
12
13  return (
14    <>
15      <Modal
16        isOpen={!!router.query.postId} // <==
17        onRequestClose={() => router.push("/")}
18        contentLabel="Post modal"
19      >
20        <Post id={router.query.postId} pathname={router.pathname} />
21      </Modal>
22      <Grid />
23    </>
24  )
25}

with why-did-you-render

link

https://github.com/welldone-software/why-did-you-render
the setup seems to be a lot simplet than what I see in the package repo:

1import React from 'react'
2import whyDidYouRender from '@welldone-software/why-did-you-render'
3
4if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
5  whyDidYouRender(React)
6}
7
8export default function App({ Component, pageProps }) {
9  return <Component {...pageProps} />

Analyze bundle

link

this is a must to see wtf is happening with the bundles
it has a new analyze script

1const withBundleAnalyzer = require("@next/bundle-analyzer")({
2  enabled: process.env.ANALYZE === "true",
3})
4
5const nextConfig = {
6  // any configs you need
7}
8
9module.exports = withBundleAnalyzer(nextConfig)

Custom Routes proxying Example

link

this is great to incrementally migrate from whatever other server to nextjs
the magic relies in the next.config.js

1// next.config.js
2module.exports = {
3  async rewrites() {
4    return [
5      // we need to define a no-op rewrite to trigger checking
6      // all pages/static files before we attempt proxying
7      {
8        source: "/:path*",
9        destination: "/:path*",
10      },
11      {
12        source: "/:path*",
13        destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
14      },
15    ]
16  },
17}