Skip to content

fix: prepend basePath to static file URLs #1213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions demos/base-path/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "next",
"root": true
}
34 changes: 34 additions & 0 deletions demos/base-path/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel
34 changes: 34 additions & 0 deletions demos/base-path/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
1 change: 1 addition & 0 deletions demos/base-path/local-plugin/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('../../../lib')
1 change: 1 addition & 0 deletions demos/base-path/local-plugin/manifest.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
name: '@netlify/plugin-nextjs-local'
5 changes: 5 additions & 0 deletions demos/base-path/local-plugin/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions demos/base-path/local-plugin/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "local-plugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"preinstall": "cd ../../.. && npm i"
},
"author": "",
"license": "ISC"
}
21 changes: 21 additions & 0 deletions demos/base-path/netlify.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[build]
command = "next build"
publish = ".next"
ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../../"

[build.environment]
# cache Cypress binary in local "node_modules" folder
# so Netlify caches it
CYPRESS_CACHE_FOLDER = "../node_modules/.CypressBinary"

[dev]
framework = "#static"

[[plugins]]
package = "./local-plugin"

[[plugins]]
package = "@netlify/plugin-local-install-core"

# [[context.deploy-preview.plugins]]
# package = "netlify-plugin-cypress"
46 changes: 46 additions & 0 deletions demos/base-path/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
module.exports = {
// Configurable site features we support:
// distDir: 'build',
generateBuildId: () => 'build-id',
i18n: {
defaultLocale: 'en',
locales: ['en', 'es', 'fr'],
},
async headers() {
return [
{
source: '/',
headers: [
{
key: 'x-custom-header',
value: 'my custom header value',
},
],
},
]
},
trailingSlash: true,
// Configurable site features _to_ support:
basePath: '/docs',
// Rewrites allow you to map an incoming request path to a different destination path.
async rewrites() {
return {
beforeFiles: [
{
source: '/old/:path*',
destination: '/:path*',
},
],
}
},
// Redirects allow you to redirect an incoming request path to a different destination path.
async redirects() {
return [
{
source: '/redirectme',
destination: '/',
permanent: true,
},
]
},
}
7 changes: 7 additions & 0 deletions demos/base-path/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp
22 changes: 22 additions & 0 deletions demos/base-path/pages/another.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Head from 'next/head'
import { useRouter } from 'next/router'
import styles from '../styles/Home.module.css'

export default function Home() {
const { locale } = useRouter()
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>Another page</h1>
</main>


</div>
)
}
5 changes: 5 additions & 0 deletions demos/base-path/pages/api/hello.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default (req, res) => {
res.status(200).json({ name: 'John Doe' })
}
13 changes: 13 additions & 0 deletions demos/base-path/pages/dynamic/[dynamic]/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
function Dynamic() {
return <div>This is the page with a dynamic path.</div>
}

export const getStaticPaths = async () => {
return { paths: ['/dynamic/dynamic-1'], fallback: false }
}

export const getStaticProps = ({ params }) => {
return { props: params }
}

export default Dynamic
13 changes: 13 additions & 0 deletions demos/base-path/pages/fallback/[dynamic]/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
function Dynamic() {
return <div>This is the page with a dynamic path.</div>
}

export const getStaticPaths = async () => {
return { paths: ['/fallback/dynamic-1'], fallback: 'blocking' }
}

export const getStaticProps = ({ params }) => {
return { props: params }
}

export default Dynamic
37 changes: 37 additions & 0 deletions demos/base-path/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import styles from '../styles/Home.module.css'

export default function Home() {
const { locale } = useRouter()
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>

<p>The current locale is {locale}</p>

<div className={styles.grid}>
<Link href="/dynamic/dynamic-1" className={styles.card}>
<h2>Dynamic Page</h2>
</Link>
<Link href="/fallback/dynamic-2" className={styles.card}>
<h2>Fallback Page</h2>
</Link>
<Link href="/redirectme" className={styles.card}>
<h2>Redirect me</h2>
</Link>
</div>
</main>
</div>
)
}
Binary file added demos/base-path/public/favicon.ico
Binary file not shown.
121 changes: 121 additions & 0 deletions demos/base-path/styles/Home.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}

.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}

.title a {
color: #0070f3;
text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}

.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}

.title,
.description {
text-align: center;
}

.description {
line-height: 1.5;
font-size: 1.5rem;
}

.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}

.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}

.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
width: 45%;
}

.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}

.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}

.logo {
height: 1em;
margin-left: 0.5rem;
}

@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
Loading