Issue 1:
In my static folder I have the following symlink:

semantic.min.css -> ../node_modules/semantic-ui-css/semantic.min.css

When I do a next export it copies the symlink into the out/static folder. It would make more sense for it to read the contents of the file that is symlinked to and place that into the out/static folder.

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Read the contents of the file pointed to by the symlink and place that into the out/static folder.

Current Behavior

Symlink is copied.

Context

I'm symlinking a file in my node_modules directory into my static directory so whatever version is installed by npm is immediately accessible and so that I don't have to commit that 3rd party modules file into git. Now I'm having to manually replace the symlink in the out folder after each export.

Your Environment

Tech
Version

next
4.1.3

Issue 2:
Bug report

Describe the bug

When using Link (next/Link) with a functional component (button), it stops working.

Basically, the link is ignored. The button's click is properly triggered, but there is no redirection happening.

To Reproduce

I had the following (working) source code:

<div>
<Link // TODO sentry warning if < 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers
href={`/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`}
>
<Button
className="btn-border"
onClick={(): void => {
setIsLoadingSolutionsPage(true);
}}
>
{t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
{
isLoadingSolutionsPage ? (
<>
{' '}<AnimatedBubble />
</>
) : null
}
</Button>
</Link>
</div>

Which I changed into the following (non-working) code:

const solutionsPageLink = `/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`; // TODO sentry warning if < 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers

const SolutionsPageButton = (): JSX.Element => {
return (
<Button
className="btn-border"
onClick={(): void => {
// Stores the selected persona in the browser localStorage
patchUserData({ persona: studentSolutionContext.persona });

// Starts button's animation
setIsLoadingSolutionsPage(true);
}}
>
{t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
{
isLoadingSolutionsPage ? (
<>
{' '}<AnimatedBubble />
</>
) : null
}
</Button>
);
};

// ...

<div>
{
// XXX When displayed within an iframe, then open the link in a new page
// The point is to avoid displaying too much on the institutional website,
// but rather redirect the user to our platform so that they may benefit from all our services
isInIframe ? (
<a
href={solutionsPageLink}
target={'_blank'} // Open in a new tab while keeping the current tab open
>
<SolutionsPageButton />
</a>
) : (
<Link
href={solutionsPageLink}
>
<SolutionsPageButton />
</Link>
)
}
</div>

Expected behavior

The Link component should redirect in both cases.

System information

OS: [e.g. macOS, Windows] Mac

Browser (if applies) [e.g. chrome, safari] Chrome

Version of Next.js: [e.g. 6.0.2] 9.1

Additional context

Related to #7915, couldn't find a solution even though I read https://nextjs.org/docs/api-reference/next/link, but there is not example when using a <Button>.

My easiest workaround would be not using a functional component, and thus duplicate my button's code.

Alternatively, if the Link component could behave link a <a> (through prop configuration), I wouldn't have to perform such ternary condition, and could just provide such prop dynamically (no duplicated code, no functional component)