generated from staticwebdev/nextjs-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit bc30cf0
Showing
20 changed files
with
10,618 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"extends": ["next/core-web-vitals", "next", "prettier"], | ||
"plugins": ["prettier"], | ||
"rules": { | ||
"@next/next/google-font-display": "off", | ||
"prettier/prettier": ["error"] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
name: Lint | ||
|
||
on: push | ||
|
||
jobs: | ||
run-linters: | ||
name: Run linters | ||
runs-on: ubuntu-latest | ||
|
||
steps: | ||
- name: Check out Git repository | ||
uses: actions/checkout@v2 | ||
|
||
- name: Set up Node.js | ||
uses: actions/setup-node@v2 | ||
with: | ||
node-version: 16 | ||
|
||
# ESLint and Prettier must be in `package.json` | ||
- name: Install Node.js dependencies | ||
run: npm install | ||
|
||
- name: Run linters | ||
run: npm run lint |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# 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 | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# local env files | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"singleQuote": true, | ||
"tabWidth": 2, | ||
"semi": true | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
# Next.js Starter (Static Sites) | ||
|
||
[Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview) allows you to easily build [Next.js](https://nextjs.org/) apps in minutes. Use this repo with the [Azure Static Web Apps Next.js tutorial](https://learn.microsoft.com/azure/static-web-apps/deploy-nextjs-static-export?tabs=github-actions) to build and customize a new static site. | ||
|
||
|
||
|
||
## Running locally | ||
|
||
To run locally, open the development server with the following command: | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
Next, open [http://localhost:3000](http://localhost:3000) in your browser to see the result. | ||
|
||
For a more rich local development experience, refer to [Set up local development for Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/local-development). | ||
|
||
## How it works | ||
|
||
This starter application is configured to build a static site with dynamic routes. | ||
|
||
### Dynamic routes | ||
|
||
The *pages/project/[slug].js* file implements code that tells Next.js what pages to generate based on associated data. In Next.js, each page powered by dynamic routes needs to implement `getStaticPaths` and `getStaticProps` to give Next.js the information it needs to build pages that match possible route values. | ||
|
||
Inside `getStaticPaths`, each data object is used to create a list of paths all possible pages. | ||
|
||
```javascript | ||
export async function getStaticPaths() { | ||
const paths = projects.map((project) => ({ | ||
params: { path: project.slug }, | ||
})) | ||
return { paths, fallback: false }; | ||
} | ||
``` | ||
The `getStaticProps` function is run each time a page is generated. Based off the parameter values, the function matches the full data object to the page being generated. Once the data object is returned, it is used as the context for the generated page. | ||
|
||
```javascript | ||
export async function getStaticProps({ params }) { | ||
const project = projects.find(proj => proj.slug === params.path); | ||
return { props: { project } }; | ||
} | ||
``` | ||
### Application configuration | ||
|
||
The `next.config.js` file is set up to enforce trailing slashes on all page. | ||
|
||
```javascript | ||
module.exports = { | ||
trailingSlash: true | ||
}; | ||
``` | ||
### Build scripts | ||
|
||
The npm `build` script runs commands to not only build the application, but also generate all the static files to the `out` folder. | ||
|
||
```json | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build && next export", | ||
}, | ||
``` | ||
|
||
> **Note:** If you use the [Azure Static Web Apps CLI](https://docs.microsoft.com/azure/static-web-apps/local-development), copy the *staticwebapp.config.json* file to the *out* folder, and start the CLI from the *out* folder. |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
|
||
export default function SmallCard({ Icon, title, slug }) { | ||
return ( | ||
<a className="card-small" href={`/project/${slug}`}> | ||
<Icon w={153} h={163} /> | ||
<h3>{title}</h3> | ||
</a> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
trailingSlash: true | ||
}; |
Oops, something went wrong.