#Head

1 messages · Page 1 of 1 (latest)

mighty hare
#

Can you add a <Head> tag on specific page.tsx?

naive raptorBOT
#

Hi @mighty hare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, you can add a <Head> tag on a specific page.tsx in Next.js. The next/head React component is used to manage <head> HTML elements such as title and meta. Here's an example of how you can use it:

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

In this example, the <Head> component is used to set the page title. You can add other elements like meta tags in a similar way.

However, it's important to note that in the app directory, next/head is replaced with the new built-in SEO support. So, if you're working in the app directory, you should use the Metadata API to manage <head> elements.

Here's an example of how you can do this:

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Page Title',
}
 
export default function Page() {
  return '...'
}

In this example, the page title is set using the Metadata API.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor I mean, I want to add my adsense script

<Script
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"
            crossOrigin="anonymous"
            strategy="afterInteractive"
        />

to only specific pages instead of adding them on my layout.tsx file, how do I do that?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can add your AdSense script to specific pages in Next.js. You can do this by importing the next/script component and including your script in the return statement of your specific page component. Here's an example:

import Script from 'next/script'

export default function SpecificPage() {
  return (
    <>
      {/* Your page content */}
      <Script
        async
        src="<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx">
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
    </>
  )
}

In this example, replace SpecificPage with the name of your specific page. The AdSense script will only load on this page.

This approach aligns with the recommendation from the Next.js documentation, which suggests including third-party scripts only in specific pages or layouts to minimize any unnecessary impact to performance.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor is it not required to add the script on the head tag? Because in your example, it would be inside the body tag

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The placement of the script tag (in the <head> or <body>) depends on the specific requirements of the script. In the case of the AdSense script you provided, it's marked as async, which means it can be executed independently of other scripts, so it doesn't necessarily need to be in the <head>.

However, if you want to place the script in the <head>, you can do so by using the next/head component. Here's an example:

import Head from 'next/head'

export default function SpecificPage() {
  return (
    <>
      {/* Your page content */}
      <Head>
        <script
          async
          src="<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx">
          crossOrigin="anonymous"
        />
      </Head>
    </>
  )
}

In this example, the script is placed in the <head> of the document. Note that the strategy="afterInteractive" attribute is not used here because it's specific to the next/script component and doesn't apply to the native <script> tag.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor can I use the <Head> component on the app router though

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

No, the next/head component is not supported in the App Router. In the app directory, next/head is replaced with the new built-in SEO support. You should use the Metadata API to manage <head> elements when using the App Router.

Here's an example of how you can set the page title using the Metadata API:

import { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Page Title',
}
 
export default function Page() {
  return '...'
}

In this example, the page title is set using the Metadata API.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor yes, that's the problem though. How do I add a script to the Metadata API?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The Metadata API in Next.js currently does not support adding scripts directly. It is primarily used for SEO-related tags such as title, meta, and link tags.

However, you can use the next/script component to add scripts to your pages or layouts. This component is designed to optimize loading for third-party scripts.

Here's an example of how you can add a script to a specific page:

import Script from 'next/script'

export default function SpecificPage() {{
  return (
    <>
      {{/* Your page content */}}
      <Script
        async
        src="<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx">
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
    </>
  )
}}

In this example, replace SpecificPage with the name of your specific page. The AdSense script will only load on this page.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

I'm having this error:

The resource https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

my adsense script looks like this:

<Script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxx"
crossOrigin="anonymous"
strategy="afterInteractive"
/>

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The warning you're seeing is related to the browser's preload feature. It's saying that a resource was preloaded but not used within a few seconds from the window's load event. This can happen when a script is loaded asynchronously, as is the case with your AdSense script.

The next/script component in Next.js automatically adds a preload link for scripts with strategy="afterInteractive". However, the AdSense script might not execute immediately after the page loads, which can lead to this warning.

Unfortunately, there's currently no built-in way in Next.js to disable this automatic preloading for specific scripts. This is a known issue and has been discussed in the Next.js GitHub repository (source (https://github.com/vercel/next.js/issues/51524)).

As a workaround, you could try manually adding the script tag to your document using the dangerouslySetInnerHTML prop. Here's an example:

<div
  dangerouslySetInnerHTML={{
    __html: `
      <script async src="<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"> crossOrigin="anonymous"></script>
    `,
  }}
/>

Please note that using dangerouslySetInnerHTML can expose your site to cross-site scripting (XSS) attacks, so it should be used with caution.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

Can't I be using the normal <script> tag for this matter? Does that even exist? @naive raptor

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can use the normal <script> tag in Next.js. However, it's recommended to use the next/script component for better performance and optimization. The next/script component ensures that your scripts load in the correct order and don't block the rendering of your page.

If you're facing issues with next/script, you can use the normal <script> tag as a workaround. You can add it to your component using the dangerouslySetInnerHTML prop, like this:

<div
  dangerouslySetInnerHTML={{
    __html: `
      <script async src="<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxx"> crossOrigin="anonymous"></script>
    `,
  }}
/>

Please note that using dangerouslySetInnerHTML can expose your site to cross-site scripting (XSS) attacks, so it should be used with caution.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor
what does this error usually mean?
Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.

I get quite a lot of these, 300 in fact

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The warning "Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox" is related to upcoming changes in Google Chrome's handling of cookies.

Google is planning to phase out support for third-party cookies in Chrome as part of their Privacy Sandbox initiative. This is intended to enhance privacy on the web by creating standards that prevent cross-site tracking while still allowing for personalized advertising.

Third-party cookies are cookies set by a website other than the one you are currently on. For example, if you visit a website that has a Facebook Like button, Facebook may set a cookie that can be accessed when you later visit Facebook. This would be a third-party cookie.

If your website or any scripts on your website are setting or relying on third-party cookies, these may stop working in future versions of Chrome. This could potentially impact functionality such as user tracking, advertising, or social media integrations.

To prepare for this change, you may need to update your website or scripts to use alternative methods for tracking or personalization. This could involve using first-party cookies (cookies set by your own website), or other technologies such as the new APIs being developed as part of the Privacy Sandbox initiative.

Please note that these changes are specific to Google Chrome. Other browsers may have different policies regarding third-party cookies.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor How does caching work in NextJS? Is there a need to set it up?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Next.js improves your application's performance and reduces costs by caching rendering work and data requests. It uses several caching mechanisms, and most of the caching heuristics are determined by your API usage and have defaults for the best performance with zero or minimal configuration. So, in most cases, there's no need for explicit setup.

Here's a high-level overview of the different caching mechanisms in Next.js:

  • Request Memoization: This mechanism re-uses the return values of functions in a React Component tree during a per-request lifecycle.
  • Data Cache: This mechanism stores data across user requests and deployments. It's persistent and can be revalidated.
  • Full Route Cache: This mechanism reduces rendering cost and improves performance by caching HTML and RSC payload on the server. It's persistent and can be revalidated.
  • Router Cache: This mechanism reduces server requests on navigation by caching RSC Payload on the client. It lasts for a user session or is time-based.

Next.js can cache responses, generated static pages, build outputs, and other static assets like images, fonts, and scripts. Caching and revalidating pages use the same shared cache. By default, this cache is stored to the filesystem (on disk) on your Next.js server. This works automatically when self-hosting using both the Pages and App Router.

You can configure the Next.js cache location if you want to persist cached pages and data to durable storage, or share the cache across multiple containers or instances of your Next.js application.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor How do we handle RSS feeds in nextjs

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, you can handle RSS feeds by creating a custom server-side route that returns your feed in XML format. Here's a basic example of how you can do this:

// pages/api/rss.js
export default function(req, res) {
  res.setHeader('Content-Type', 'text/xml');
  res.write(`<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
  <title>Your RSS Feed Title</title>
  <link><https://yourwebsite.com</link>>
  <description>Your RSS Feed Description</description>
  <!-- Add your RSS items here -->
</channel>
</rss>`);
  res.end();
}

In this example, replace Your RSS Feed Title, <https://yourwebsite.com,> and Your RSS Feed Description with your actual RSS feed title, link, and description. You can add your RSS items in the commented section.

You can then access your RSS feed at <https://yourwebsite.com/api/rss.>

Additionally, Next.js supports adding alternate links to your metadata, which can be used to link to your RSS feed:

export const metadata = {
  alternates: {
    types: {
      'application/rss+xml': '<https://nextjs.org/rss',>
    },
  },
}

In this example, an alternate link to the RSS feed is added to the page's metadata.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

{
code: 'rest_invalid_param',
message: 'Invalid parameter(s): categories',
data: {
status: 400,
params: {
categories: 'categories is not a valid Term ID List. Reason: categories[0] is not of type integer.'
},
details: { categories: [Object] }
}
}

What does this mean?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing is indicating that the categories parameter you're passing to a REST API endpoint is invalid. The API is expecting categories to be a list of integers (Term IDs), but it's receiving something else.

The error message categories is not a valid Term ID List. Reason: categories[0] is not of type integer. suggests that the first item in the categories list is not an integer.

You should check the data you're sending in the categories parameter and ensure it's a list of integers. If you're unsure of the data type of your categories, you can use JavaScript's typeof operator to check.

Here's an example of how you can check the data type of each category:

categories.forEach(category => {
  console.log(typeof category);
});

In this example, replace categories with your actual categories list. This will log the data type of each category to the console.

If any of the categories are not integers, you'll need to convert them to integers before sending them to the API. You can do this using JavaScript's parseInt function, like this:

const integerCategories = categories.map(category => parseInt(category));

In this example, replace categories with your actual categories list. This will create a new list of categories where each category has been converted to an integer.

Please note that these are general JavaScript examples and may need to be adapted to your specific codebase and use case.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor Seems like, my problem lies with the .next directory, my css aren't working as well.

As i check using the client console, it's looking for this: /_next/static/css/app/layout.css?v=1722921856357
But there's no such file though, however, as I tried to use /.next/static/css/app/layout.css?v=1722921856357 it worked

why is that?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The issue you're experiencing might be related to the way Next.js handles static files and assets. In Next.js, the .next directory is generated during the build process and contains the compiled version of your application, including CSS and JavaScript files.

When you run your application, Next.js serves the static files from the .next directory under the /_next path. This is why you're seeing URLs like /_next/static/css/app/layout.css?v=1722921856357 in your browser.

However, the actual file on your filesystem is located at .next/static/css/app/layout.css. The /_next path is a virtual path used by Next.js to serve static files, and it doesn't correspond to an actual directory on your filesystem.

If your CSS isn't working, it might be because the browser is unable to load the CSS file from the /_next path. This could be due to a number of reasons, such as a misconfiguration in your Next.js setup or a problem with your server.

Here are a few things you can check:

  • Make sure you're running your Next.js application correctly. If you're running it in development mode, you should use the next dev command. If you're running it in production mode, you should use the next start command after building your application with next build.
  • Check your next.config.js file for any configurations that might affect the serving of static files.
  • If you're using a custom server, make sure it's correctly configured to serve files from the /_next path.
#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor If you're using a custom server, make sure it's correctly configured to serve files from the /_next path.

what do you mean by this?

This is done via the next dev command as I'm trying to test it on my domain. Reverse proxy seems to be set-up properly to serve the file from the specified port so I'm not sure why it's not working properly. The main culprit I'm thinking of is that my web server may not have been configured correctly to serve NextJS. As I still do have a .next folder on my directory while the paths in the application itself leads to _next

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

When you're using a custom server with Next.js, you need to ensure that it's set up to correctly handle requests for static files that are served from the /_next path. This includes all the JavaScript, CSS, and other static files that are part of your Next.js application.

The next dev command starts the Next.js development server which automatically handles requests for /_next path. However, if you're using a custom server or a reverse proxy, you might need to add additional configuration to ensure these requests are handled correctly.

For example, if you're using a reverse proxy like Nginx or Apache, you might need to add a configuration to proxy requests for /_next to your Next.js server. Here's an example for Nginx:

location /_next/ {
    proxy_pass <http://localhost:3000/_next/;>
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

And here's an example for Apache:

<Location /_next/>
    ProxyPass <http://localhost:3000/_next/>
    ProxyPassReverse <http://localhost:3000/_next/>
</Location>

In these examples, replace <http://localhost:3000> with the URL of your Next.js server.

If you're using a custom server with Express.js, you can use the app.getRequestHandler() function provided by Next.js to handle these requests. Here's an example:

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/_next/*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on <http://localhost:3000'>);
  });
});
#

In this example, the server.get('/_next/*', (req, res) => { return handle(req, res); }); line tells Express to use the Next.js request handler for any requests that start with /_next.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-win32-x64-msvc isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-win32-ia32-msvc isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-win32-arm64-msvc isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-linux-arm64-musl isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-linux-arm64-gnu isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-darwin-x64 isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /www/wwwroot/bct27.com/node_modules/@next/swc-darwin-arm64 isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The warning messages you're seeing are related to the Webpack's caching strategy. It seems that Webpack is trying to manage certain directories in your node_modules (specifically, the various platform-specific @next/swc-* directories), but it's unable to do so because these directories either don't exist or don't contain a package.json file.

The snapshot.managedPaths option mentioned in the warning messages is a Webpack configuration option that specifies which directories should be managed by Webpack. When a directory is managed, Webpack will invalidate the cache whenever a new module is installed or an existing module is updated in that directory.

If you're not actively using these @next/swc-* modules in your project, these warning messages might not be a cause for concern. They're just letting you know that Webpack is unable to manage these directories.

However, if you're experiencing issues with your build or if these warning messages are causing problems, you might want to look into why these directories are being included in the managedPaths option and whether they should be.

Unfortunately, the provided knowledge sources do not contain specific information on how to resolve these warning messages. For more detailed guidance, you might want to refer to the Webpack documentation (https://webpack.js.org/configuration/other-options/#snapshotmanagedpaths) or the Next.js GitHub repository (https://github.com/vercel/next.js) for potential solutions or workarounds.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The provided configuration seems to be for an Nginx server and it looks generally correct. However, there are a few things you might want to check:

  1. Ensure that the proxy_pass directive is pointing to the correct port where your Next.js application is running. In your configuration, it's set to <http://localhost:3000.> If your Next.js app is running on a different port, you'll need to update this.
location / {
    proxy_pass <http://localhost:3000;>  # Adjust the proxy_pass port if needed
    ...
}
  1. Make sure that the paths for your SSL certificate and key are correct:
ssl_certificate    /www/server/panel/vhost/cert/bct27.com/fullchain.pem;
ssl_certificate_key    /www/server/panel/vhost/cert/bct27.com/privkey.pem;
  1. Check that the root directive points to the correct directory where your Next.js application is located:
root /www/wwwroot/bct27.com;
  1. The following commented-out lines seem to be intended for redirecting HTTP traffic to HTTPS. If you want to enforce HTTPS, you might want to uncomment these lines:
# if ($server_port !~ 443){
#     rewrite ^(/.*)$ <https://$host$1> permanent;
# }
  1. The following commented-out line seems to be intended for serving Next.js static files. If you're having issues with static files not being served correctly, you might want to uncomment this line:
# rewrite ^/_next/(.*\.(css|js))$ /$1 break;

Remember to reload or restart your Nginx server after making any changes to the configuration.

#

Please note that these are general suggestions based on the provided configuration and may not solve your specific issue. If you're still having problems, you might want to refer to the Nginx documentation (http://nginx.org/en/docs/) or the Next.js documentation (https://nextjs.org/docs) for more detailed guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The 404 error indicates that the server can't find the requested resource, which in this case is the webpack.js file. This could be due to several reasons:

  1. The file doesn't exist: Make sure that the webpack.js file is actually being generated and is located in the correct directory.

  2. Incorrect server configuration: Your Nginx configuration needs to correctly handle requests for static files. The commented-out line in your configuration might be relevant here:

# rewrite ^/_next/(.*\.(css|js))$ /$1 break;

This line is intended to rewrite requests for static files so that they're served from the correct location. If you're having issues with static files, you might want to uncomment this line and then reload or restart Nginx.

  1. Caching issues: If an old or incorrect version of the file is being cached, it could result in a 404 error. You might want to try clearing your cache to see if that resolves the issue.

  2. Build issues: If there's an issue with your Next.js build process, it could result in missing or incorrect static files. You might want to try rebuilding your Next.js application.

Unfortunately, without more information, it's difficult to provide a more specific solution. If you're still having issues, you might want to refer to the Nginx documentation (http://nginx.org/en/docs/) or the Next.js documentation (https://nextjs.org/docs) for more detailed guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

mighty hare
#

@naive raptor

Yes, my problem is still that it doesn't resolve _next to .next

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The issue you're experiencing seems to be related to how your server is configured to handle requests for static files generated by Next.js. These files are typically located in the /.next/static/ directory, but your server needs to be configured to serve them from /_next/static/.

In your Nginx configuration, you might need to add a location block specifically for handling these static files. Here's an example:

location ^~ /_next/ {
    root /path/to/your/.next/;
    try_files $uri $uri/ =404;
}

In this example, replace /path/to/your/.next/ with the actual path to your .next directory. This configuration tells Nginx to serve files from the /.next/ directory when a request is made to /_next/.

After making changes to your Nginx configuration, remember to reload or restart the Nginx service for the changes to take effect.

Please note that this is a general suggestion and might not solve your specific issue. If you're still having problems, you might want to refer to the Nginx documentation (http://nginx.org/en/docs/) or the Next.js documentation (https://nextjs.org/docs) for more detailed guidance.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
    expires      12h;
    error_log /dev/null;
    access_log /dev/null; 
}

Seems like these 2 are the problem... it's fixed now, can you explain to me why though?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @mighty hare, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

mighty hare
#

@naive raptor Can you use fs library in NextJS server client?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The fs (File System) module is a Node.js built-in module for interacting with the file system on your server. It's commonly used for reading and writing files on the server.

However, it's important to note that the fs module is not available on the client-side because it's a Node.js module and it requires access to the server's file system, which is not possible from the client-side (browser).

In Next.js, you can use the fs module in API routes, getStaticProps, getStaticPaths, and getServerSideProps because these functions run on the server-side. Here's an example of how you might use it in getStaticProps:

import { promises as fs } from 'fs'
import path from 'path'
 
export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)
 
  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')
 
    return {
      filename,
      content: fileContents,
    }
  })

  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/api-reference/functions/get-static-props#reading-files-use-processcwd))

If you try to use fs in client-side code (like a React component), you'll get a "Module not found: Can't resolve 'fs'" error because the module is not included in the client-side bundle.

If you need to read a file on the client-side, you would typically make a request to a server-side API (like a Next.js API route) that reads the file and returns the data.

#

Remember, any code that uses fs should be written in a way that it only runs on the server and not on the client.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor So it means we can also use fs in pages where 'use client' is not specified?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can use the fs module in Next.js pages where 'use client' is not specified. However, you should only use it in server-side data fetching methods like getStaticProps, getStaticPaths, and getServerSideProps.

Here's an example of how you might use it in getStaticProps:

import { promises as fs } from 'fs'
import path from 'path'
 
export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)
 
  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')
 
    return {
      filename,
      content: fileContents,
    }
  })

  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

In this example, getStaticProps runs at build time on the server, so it's able to use the fs module to read files from the file system.

Remember, any code that uses fs should be written in a way that it only runs on the server and not on the client. If you try to use fs in client-side code (like a React component), you'll get a "Module not found: Can't resolve 'fs'" error because the module is not included in the client-side bundle.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

What would happen to my mapping logic when building? Will this still work? Can I still use fs to modify this during runtime?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The fs module in Node.js allows you to interact with the file system on your server, which includes reading, writing, updating, and deleting files. However, its usage depends on the context of your Next.js application.

  1. During Build Time: If you're using fs in data fetching methods like getStaticProps or getStaticPaths, it will work during build time. These methods run at build time on the server and generate static HTML pages. Any file reading or writing operations will be executed once during the build process and the results will be included in the generated static pages.

  2. During Runtime: If you want to use fs to modify files during runtime, you would typically do this in a server-side environment like an API route in Next.js. API routes in Next.js are server-side and can use Node.js features. Here's an example:

import fs from 'fs'
import path from 'path'

export default function handler(req, res) {
  const filePath = path.join(process.cwd(), 'my-file.txt')
  fs.writeFileSync(filePath, 'Hello World')
  res.status(200).json({ message: 'File written' })
}

In this example, an API route is used to write data to a file on the server whenever the route is hit.

  1. On the Client Side: You cannot use fs on the client side (in a browser environment). The fs module is a part of Node.js and is not available in the browser. If you try to use fs in client-side code, you'll get a "Module not found: Can't resolve 'fs'" error.

Remember, any logic that involves fs should be handled server-side, either at build time or runtime, but not on the client side.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor I am running my fs method via server actions. The thing is, it modifies the json files at runtime, this works well with npm run dev as the json files inside /src/app directory gets modified during runtime. I wonder how this works when building though

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

When you run npm run dev, Next.js starts your application in development mode. In this mode, server actions and other server-side code are executed on-demand as requests come in, which allows for dynamic behavior like modifying JSON files at runtime.

However, when you build your application with next build, Next.js generates a static version of your application by default. This process involves running all server-side data fetching methods (getStaticProps, getStaticPaths, and getServerSideProps) at build time. Any server actions that are invoked as part of these methods will also be executed at build time. The results are then used to generate static HTML pages.

If your server actions are modifying JSON files, these modifications will be made at build time, and the resulting files will be included in the build output. These files will not be modified again at runtime unless you're using a server-side environment like an API route or getServerSideProps.

If you need to modify JSON files at runtime after building your application, you would typically do this in an API route or with getServerSideProps, which are executed on the server at runtime. However, keep in mind that any changes made at runtime will not persist across deploys or server restarts unless you're storing the data in a persistent storage system like a database or a cloud storage service.

Remember, any code that uses fs should be written in a way that it only runs on the server and not on the client. If you try to use fs in client-side code, you'll get a "Module not found: Can't resolve 'fs'" error because the module is not included in the client-side bundle.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

I'm running it on server components, is that not enough? Is it necessary to create an API for it? @naive raptor

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Server Components in Next.js are a powerful feature that allows you to write components that run only on the server and send the rendered HTML to the client. This can be beneficial for performance, security, and other reasons.

If you're using the fs module in a Server Component, it will work because Server Components run on the server where Node.js modules like fs are available. However, it's important to understand when and how these components are executed.

Server Components are rendered at request time, so if you're modifying files with fs in a Server Component, these modifications will happen each time a request is made that involves rendering that component. This is similar to how getServerSideProps works.

However, unlike API routes or getServerSideProps, Server Components are not designed to respond to API requests or handle dynamic server-side logic. They are primarily for rendering components on the server.

If you need to perform server-side actions in response to specific API requests (like a POST request to update data), you would typically use an API route. API routes provide a straightforward solution for handling server-side logic, and they can be used alongside Server Components in your application.

Remember, any code that uses fs should be written in a way that it only runs on the server and not on the client. If you try to use fs in client-side code, you'll get a "Module not found: Can't resolve 'fs'" error because the module is not included in the client-side bundle.

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

Can you use fs or API routes for static exports? @naive raptor

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

No, you cannot use fs or API routes for static exports in Next.js. According to the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#unsupported-features), features that require a Node.js server, or dynamic logic that cannot be computed during the build process, are not supported with static exports. This includes API Routes.

Static exports in Next.js are used to pre-render all pages at build time and export them as static HTML files. This means that all data required for rendering the pages must be available at build time, and no server-side operations (like reading from the file system with fs or handling API requests) can be performed at runtime.

If you need to use fs or API routes in your Next.js application, you would typically deploy it as a server-side rendered (SSR) or statically generated (SG) application with a Node.js server, rather than using static exports.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

can you use fetch api for static export? @naive raptor

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can use the fetch API in the context of static exports in Next.js. The fetch API can be used in data fetching methods like getStaticProps or getStaticPaths to fetch data at build time, which can then be used to pre-render pages.

Here's an example of how you might use fetch in getStaticProps:

export async function getStaticProps() {
  // Call an external API endpoint to get posts
  const res = await fetch('<https://.../posts'>)
  const posts = await res.json()
 
  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms))

In this example, getStaticProps runs at build time on the server, fetches data from an external API, and passes the fetched data to the page's props. The page is then pre-rendered with this data and included in the static export.

Remember, any data fetching for static exports must be done at build time, not at runtime. The fetch API can be used to fetch data at build time, but it cannot fetch data at runtime in a statically exported Next.js application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

export async function generateStaticParams() {
const props: TProps[] = [];

const categories: TCategory[] = await fetchCategories();

for (const category of categories) {
    const totalPages = Math.ceil(category.count / 10);
    for (let i = 1; i <= totalPages; i++) {
        const rawSlug = decodeURIComponent(category.slug);
        const keyword = getKeyword(rawSlug, rawSlug);
        const slug = keyword ? await formatHelper(rawSlug, keyword) : rawSlug;
        props.push({
            params: {
                category: slug
            },
            searchParams: {
                id: category.id.toString(),
                page: i.toString()
            }
        });
    }
}

return props;

}

For some reason, I keep getting this error, why is that?
Error: Page "/[category]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing typically occurs when Next.js is unable to find the generateStaticParams() function in a file that's using dynamic routes with output: 'export' in the next.config.js file.

However, from the code you've provided, it seems like you do have a generateStaticParams() function defined. This could mean a few things:

  1. File Location: Ensure that your generateStaticParams() function is in the correct file. For a dynamic route like "/[category]", the generateStaticParams() function should be in a file named page.tsx (or page.js if you're using JavaScript) inside a directory named [category].

  2. Exporting the Function: Make sure that the generateStaticParams() function is being exported correctly. From your code, it seems like you're using export async function generateStaticParams() {...}, which should be correct.

  3. Next.js Version: Some users have reported similar issues with certain versions of Next.js. If possible, try updating to the latest version of Next.js or downgrading to a version where this was not an issue. For example, some users reported that downgrading to Next.js 13.4.19 resolved this issue for them (source (https://github.com/vercel/next.js/issues/56253)).

  4. Empty Array: If your generateStaticParams() function returns an empty array, this could cause issues. Some users have reported getting this error when generateStaticParams() returns an empty array (source (https://github.com/vercel/next.js/issues/64906)).

If none of these solutions work, it might be a good idea to create a minimal reproduction of your issue and report it as a bug to the Next.js GitHub repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor
[......
{
params: { category: '银河开户' },
searchParams: { id: '13', page: '2' }
},
{
params: { category: '银河开户' },
searchParams: { id: '13', page: '3' }
},
{
params: { category: '银河开户' },
searchParams: { id: '13', page: '4' }
},
{
params: { category: '银河开户' },
searchParams: { id: '13', page: '5' }
}
]

I get something like this while console logging the props, pretty sure it's not empty, why is it not working?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The generateStaticParams() function you've provided seems to be correctly structured and it's returning an array of objects, which is the expected return type.

However, the error message you're seeing typically indicates that Next.js is unable to find the generateStaticParams() function in the file for the dynamic route. Here are a few things you could check:

  1. File Location: The generateStaticParams() function should be in the correct file. For a dynamic route like "/[category]", the generateStaticParams() function should be in a file named page.tsx (or page.js if you're using JavaScript) inside a directory named [category].

  2. Correct Export: Ensure that the generateStaticParams() function is being exported correctly. From your code, it seems like you're using export async function generateStaticParams() {...}, which should be correct.

  3. Next.js Version: Some users have reported similar issues with certain versions of Next.js. If possible, try updating to the latest version of Next.js or downgrading to a version where this was not an issue. For example, some users reported that downgrading to Next.js 13.4.19 resolved this issue for them (source (https://github.com/vercel/next.js/issues/56253)).

If none of these solutions work, it might be a good idea to create a minimal reproduction of your issue and report it as a bug to the Next.js GitHub repository.

Also, please note that the generateStaticParams() function is used to provide the list of parameters that will be passed to getStaticProps() for pre-rendering the pages at build time. Make sure that your getStaticProps() function is correctly set up to receive and handle these parameters.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor tried exporting bare static params like this:

return [
    {
        params: {
            category: 'category'
        },
        searchParams: {
            id: '1',
            page: '1'
        }
    }
]

still not working

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The structure of the object you're returning from generateStaticParams() looks correct. It should return an array of objects, where each object has a params property (and optionally a searchParams property) that corresponds to the dynamic segments of the page path.

However, the error message you're seeing typically indicates that Next.js is unable to find the generateStaticParams() function in the file for the dynamic route. Here are a few things you could check:

  1. File Location: The generateStaticParams() function should be in the correct file. For a dynamic route like "/[category]", the generateStaticParams() function should be in a file named page.tsx (or page.js if you're using JavaScript) inside a directory named [category].

  2. Correct Export: Ensure that the generateStaticParams() function is being exported correctly. From your code, it seems like you're using export async function generateStaticParams() {{...}}, which should be correct.

  3. Next.js Version: Some users have reported similar issues with certain versions of Next.js. If possible, try updating to the latest version of Next.js or downgrading to a version where this was not an issue. For example, some users reported that downgrading to Next.js 13.4.19 resolved this issue for them (source (https://github.com/vercel/next.js/issues/56253)).

If none of these solutions work, it might be a good idea to create a minimal reproduction of your issue and report it as a bug to the Next.js GitHub repository.

#

Also, please note that the generateStaticParams() function is used to provide the list of parameters that will be passed to getStaticProps() for pre-rendering the pages at build time. Make sure that your getStaticProps() function is correctly set up to receive and handle these parameters.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor Am I correctly exporting the generateStaticParams along with the searchParameters with the type TProps[] where

type TProps = {
params: {
category: string
},
searchParams: {
id: string,
page: string
}
}

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, based on the information you've provided, it seems like you're correctly exporting the generateStaticParams() function along with the searchParams. The TProps type you've defined is also correctly structured.

Here's how your generateStaticParams() function might look with the TProps type:

type TProps = {
    params: {
        category: string
    },
    searchParams: {
        id: string,
        page: string
    }
}

export async function generateStaticParams(): Promise<TProps[]> {
    // ... your code to generate the props ...
    return [
        {
            params: {
                category: 'category'
            },
            searchParams: {
                id: '1',
                page: '1'
            }
        }
        // ... more props ...
    ];
}

In this code, generateStaticParams() is an async function that returns a promise of an array of TProps. Each TProps object includes params and searchParams properties, which match the structure you've defined.

However, if you're still seeing the error message "Page "/category]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.", it suggests that Next.js is not finding your generateStaticParams() function. This could be due to the file location, the way the function is exported, or potentially a bug in the version of Next.js you're using ([source (https://github.com/vercel/next.js/issues/56253)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor Are you sure searchParams are allowed for these static exports?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, searchParams are allowed in the generateStaticParams() function for static exports in Next.js. The generateStaticParams() function is used to provide a list of parameters that will be passed to getStaticProps() for pre-rendering the pages at build time. These parameters can include params and searchParams.

Here's an example of how you might use searchParams in generateStaticParams():

export async function generateStaticParams() {
    return [
        {
            params: {
                category: 'category'
            },
            searchParams: {
                id: '1',
                page: '1'
            }
        }
        // ... more props ...
    ];
}

In this example, generateStaticParams() returns an array of objects. Each object includes params and searchParams properties. The params property corresponds to the dynamic segments of the page path, and the searchParams property can be used to pass additional parameters.

However, please note that while searchParams are allowed in generateStaticParams(), they are not included in the URL for statically exported pages. The searchParams are only available to the getStaticProps() function during the build process.

If you're seeing an error message related to generateStaticParams() or searchParams, it could be due to a misconfiguration or potentially a bug in the version of Next.js you're using (source (https://github.com/vercel/next.js/issues/56253)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor Does static props count as params?

like

categories / [category] / [id] / [page]

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, getStaticProps and params are related but distinct concepts.

params is an object that contains the route parameters for pages that use dynamic routes. For example, if the page name is [id].js, then params will look like { id: ... }. You can use this together with getStaticPaths, which is used to specify which paths for the dynamic route will be pre-rendered at build time.

Here's an example of how params might be used in a dynamic route like categories/[category]/[id]/[page]:

export async function getStaticPaths() {
  return {
    paths: [
      { params: { category: 'category1', id: '1', page: '1' } },
      // more paths...
    ],
    fallback: false,
  };
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/api-reference/functions/get-static-props#context-parameter))

On the other hand, getStaticProps is a function you can export from a page in Next.js to fetch data at build time and pass it as props to your page. The data returned by getStaticProps is used to pre-render the page at build time.

Here's an example of how getStaticProps might be used:

export async function getStaticProps(context) {
  const { params } = context;
  const { category, id, page } = params;
  // Fetch data based on category, id, and page
  const data = await fetchData(category, id, page);
  return {
    props: {
      data,
    },
  };
}

In this example, getStaticProps uses the params from its context to fetch data, and then returns this data as props for the page.

So, to answer your question, getStaticProps does not "count as" params, but it often uses params to fetch data based on the dynamic route parameters.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor

ERROR: > Export encountered errors on following paths:
/categories/[category]/[id]/[page]/page: /categories/新手指南/14/2
/categories/[category]/[id]/[page]/page: /categories/澳门博彩/2/1
/categories/[category]/[id]/[page]/page: /categories/足球博彩网站网站/1/10
/categories/[category]/[id]/[page]/page: /categories/足球博彩网站网站/1/13
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/1
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/2
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/3
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/4
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/5
/categories/[category]/[id]/[page]/page: /categories/香港 網 上 賭場 合法/5/6

Final error: Command failed with exit code 1

why are the paths like this?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing typically indicates that there's a mismatch between the paths you're trying to export and the paths that are actually defined in your Next.js application.

In your case, it seems like you're trying to export paths like /categories/[category]/[id]/[page]/page: /categories/新手指南/14/2, but Next.js is unable to find a matching page for this path.

Here are a few things you could check:

  1. Page Structure: Make sure that your pages directory has the correct structure to match the paths you're trying to export. For a path like /categories/[category]/[id]/[page], you should have a file structure like pages/categories/[category]/[id]/[page].js (or .tsx if you're using TypeScript).

  2. Dynamic Routes: The parts of the path in square brackets ([category], [id], [page]) are dynamic route parameters. Make sure that you're correctly handling these parameters in your page components and in your getStaticPaths and getStaticProps functions.

  3. getStaticPaths: The getStaticPaths function is used to specify which paths for the dynamic route will be pre-rendered at build time. Make sure that the paths you're returning from getStaticPaths match the paths you're trying to export.

If you're still seeing the error after checking these things, it might be a good idea to create a minimal reproduction of your issue and report it as a bug to the Next.js GitHub repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@mighty hare kapa.ai is still learning and improving, please let us know how it did by reacting below

mighty hare
#

@naive raptor can you serve public assets under a directory inside the public directory?

Like if I do

public > upload > test.jpg

and access it via /upload/test.jpg?

naive raptorBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Yes, you can serve public assets under a directory inside the public directory in Next.js.

For example, if you have an image at public/upload/test.jpg, you can access it in your application at the path /upload/test.jpg.

Here's an example of how you might use such an image in a React component:

function MyComponent() {
  return <img src="/upload/test.jpg" alt="Test" />;
}

In this example, the src attribute of the img tag is set to the path of the image relative to the base URL (/), which corresponds to the public directory in your Next.js application.

This is part of Next.js's static file serving feature, which allows you to serve static files (like images) under the public directory in the root directory of your Next.js application (source (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: