Repository: next.js
Issue: Link Component Causes Full Page Refresh & CSS Overwriting Issues with Bootstrap in Next.js Deployment on Vercel
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 19.6.1
      npm: 9.4.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.4
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue

Here is the Hosted link:
https://next-issue-o6ip7rv5u-rlamba89.vercel.app/

Here is the repository:
https://github.com/rlamba89/next-issue

### To Reproduce

A react app with  13.2.5-canary.4 version using Links. 

layout.tsx 

<img width="170" alt="image" src="https://user-images.githubusercontent.com/4330382/226661954-85a861c4-72c6-4276-9b69-222bef2e6bee.png">


### Describe the Bug

I am currently using the 13.2.5-canary.4 version of Next.js. While everything appears to be functioning properly in my local environment, I have encountered a number of issues when attempting to deploy my application on Vercel.

The **first issue** is related to the behavior of the Link component. Rather than utilizing standard routing, the Link component is causing a full page refresh. My website structure includes a Header component, which houses my navigation bar links, as well as a Footer component, which includes additional links. The main content of each page is rendered between these two components.

<img width="170" alt="image" src="https://user-images.githubusercontent.com/4330382/226662266-78180bae-2a0a-475d-923a-06e6f4358a73.png">


The **second issue** is related to CSS styling. In my layout.tsx file, I am importing both bootstrap and global CSS using the following syntax:

import 'bootstrap/dist/css/bootstrap.min.css';
import './global.css';

Within the global.css file, I am attempting to override the default styling for anchor tags by setting the text-decoration property to "none". However, I have noticed that this property is not consistently being applied, with some anchor tags still retaining their default styling.

Furthermore, I have created a separate CSS module, footer.module.css, to define customized styles for the Footer component. However, I have noticed that the styles defined in this module are not being applied correctly in the deployed version of my application. Specifically, it appears that the colors I have defined in footer.module.css are not being overwritten.

Both of these issues persist even after successful testing in my local environment, but become apparent only after deployment to Vercel. As such, I would like to report these issues as bugs on GitHub.

### Expected Behavior

The expected behavior for the first problem is that the Link component should utilize standard routing instead of causing a full page refresh when the user clicks on a link.

For the second problem, the expected behavior is that custom CSS styles defined in the global.css and footer.module.css files should overwrite the default styles defined in the bootstrap CSS file.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

Vercel