NextjsTips is a collection of useful Next.js tips. The goal of this website is to help you stay up-to-date with the latest features of Next.js and share handy tips which might help you.

The website is maintained by Erhan Karadeniz.

You can subscribe to the newsletter to receive a weekly recap of the tips.

trailing slash support nextjs

Are you also annoyed by how #Nextjs was handling trailingslashes? Since Nextjs 9.5 there is a config option to support it. Add "trailingSlash: true" to your next.config.js. #javascript #webdev

View tip →

cache data from getinitialprops

getInitialProps is used to fetch data for the page but it also fires when the user presses the back button on the browser. This causes the browser to scroll to the position where you previously left off but without the remote data from getInitialProps needed to render.

View tip →

convert nextjs app to typescript

Next.js has built in type support. For getStaticProps, getStaticPaths, and getServerSideProps, you can use the GetStaticProps, GetStaticPaths, and GetServerSideProps types respectively. API routes has also type support. #typescript #javascript

View tip →

extend babel config with babelrc

Next.js includes the next/babel preset to your app. You can extend the default config. To start, you only need to define a .babelrc file at the top of your app. This file is now the source of "truth". #javascript #reactjs #webdevelopment

View tip →

multi zone support vercel

A zone is a single deployment of a Next.js app. You can have multiple zones and merge them as a single app. With multi zones support, you can merge multiple apps into a single one. #javascript #reactjs

View tip →

typescript support with nextjs

Next.js provides an integrated #TypeScript experience out of the box. To get started, create an empty tsconfig.json file in the root of your project. Then, run next and #Nextjs will guide you through the installation of the required packages to finish the setup. #reactjs #webdev

View tip →

configure target browser autoprefixer

Next.js allows you to configure the target browsers (for Autoprefixer and compiled #css features) through Browserslist. To customize browserslist, create a browserslist key in your package.json. #javascript #reactjs

View tip →

extend webpack nextjs

In order to extend our usage of webpack in #NextJS, you can define a function that extends its config inside next.config.js. The webpack function is executed twice, once for the server and once for the client. #javascript #reactjs #programming

View tip →

reuse built in error page nextjs

#NextJs Tip: If you want to render the built-in error page you can by importing the Error component. The Error component also takes title as a property if you want to pass in a text message along with a statusCode. #javascript #webdev

View tip →

configurable sass support with nextjs

With #Nextjs 9.3 built-in #SASS support was added. Now it’s possible to configure the compiler. For example you can now configure `includePaths`. This is possible by using the `sassOptions` key in `next.config.js`. #javascript #development #css

View tip →

react fast refresh support

With #Nextjs 9.4 React Fast Refresh is introduced. Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components. Make sure you have no class components or unnamed default exports. #javascript #programming #reactjs

View tip →

absolute import and aliases with nextjs

#Nextjs 9.4 has better support for absolute imports and aliases. It is now possible to set a baseurl in jsconfig.js. This file also has support for paths now. #javascript #webdev #tip

View tip →

core web vitals nextjs with reportwebvitals

Last week the #Google #Chrome team introduced Core Web Vitals. These are quality signals key to delivering great UX. #Nextjs 9.4 introduced `reportWebVitals`. Now you can send metrics directly to the chrome extension. #javascript #webdev

View tip →

new environment variables support

A common pain point of devs using Next.js was working with env vars. In #Nextjs 9.4 this process is more streamlined. You prefix your env variable with `NEXT_PUBLIC_` to expose it to the browser. No need for `next.config.js` to expose and .env files are loaded by default now

View tip →

incremental static regeneration beta nextjs

Incremental Static Regeneration (beta) has landed with #Nextjs 9.4. This is a mechanism to update existing pages, by re-rendering them in the background as traffic comes in. Inspired by SWR, this ensures traffic is served uninterrupted, always statically. #javascript

View tip →

custom 500 error page nextjs

#NextJs Tip: 500 errors are handled both client-side and server-side by the Error component. If you wish to override it, define the file pages/_error.js and add the following code. #javascript #webdev #frontend

View tip →

custom 404 page nextjs

#NextJs Tip: You can create a custom 404 page for your Next.js application. To create a custom 404 page you can create a pages/404.js file. This file is statically generated at build time. #javascript #webdev

View tip →

hybrid amp page with nextjs

#NextJs Tip: Did you know that Next.js has support for AMP pages? You can even run and hybrid AMP page. The snippet shows a page rendered as traditional HTML (default) and AMP HTML (by adding ?amp=1 to the URL) #javascript #webdevelopment

View tip →

static html export

#NextJs Tip: `next export` exports your app to static HTML, which can be run standalone without the need of a Node.js server. The exported app supports almost every feature of Next.js, incl. dynamic routes, prefetching, preloading and dynamic imports. #javascript

View tip →

preview mode support nextjs

#NextJs Tip: Static Generation is useful when your pages fetch data from a headless CMS. However, it’s not ideal when you’re writing a draft on your headless CMS and want to preview the draft immediately on your page. Luckily #nextjs supports this!

View tip →

no data fetching with shallow routing in nextjs

#NextJs Tip: When doing shallowing routing, your URL will change but data fetching methods won’t be called. Keep in mind that this only works for same page URL changes! #javascript

View tip →

serve static files with nextjs

Next.js Tip: Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/). This folder is also useful for robots.txt, Google Site Verification etc.

View tip →

nextjs component based css

Next.js Tip: Component-level #CSS in in Next.js is an optional feature. You can create a file called button.module.css, import this in you button.js file. In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files.

View tip →

nextjs built in css support

Next.js Tip: Did you know Next.js has built-in #CSS support? It’s as simple as importing a global stylesheet in your _app.{js/tsx}. Don’t import your css in an other file, since this is not supported. You can do that with component-level CSS. #javascript #typescript‬

View tip →

nextjs swr fetch data client side

Next.js Tip: Fetching data on the client side? Use https://swr.now.sh/ by @zeithq. It handles caching, revalidation, focus tracking, refetching on interval, and more.

View tip →

ssr with getserversideprops nextjs

Next.js Tip: If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

View tip →

read from file system with getstaticprops

Next.js Tip: Files can be read directly from the filesystem in getStaticProps with `process.cwd()`. In order to do so you have to get the full path to a file.

View tip →

ssg with dynamic routes

Next.js Tip: You can generate static pages (SSG) with dynamic routes. You'll have to use the built in functions getStaticPaths() & getStaticProps(). #javascript #JamStack

View tip →