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

Next page-transition Example

link

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}

Next SEO

link

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

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}
© 2021, Powered by Gatsby