Skip to content

N
nextjs-starter-template
Commit de7cfd02 by Moorthy G
Options

chore: upgrade all dependencies. especially, next.js to 13

parent e9d25df8
Showing with 83 additions and 53 deletions
app/[slug]/page.js 0 → 100644
import { notFound } from 'next/navigation';
import Button from '@components/button';
export default function Page({ params }) {
if (params.slug !== 'home') {
notFound();
}
return (
<div className="container">
<center style={{ padding: '2em' }}>
<img src={'/img/nextjs.png'} width="200" height="120" alt="" />
<h3 style={{ fontWeight: 'normal' }}>Welcome to Next.js App</h3>
<Button size="small" href="/another">
View another page
</Button>
</center>
</div>
);
}
app/another/head.js 0 → 100644
export default function Head() {
return <title>Another Page Title</title>;
}
app/another/page.js 0 → 100644
import Button from '@components/button';
const AnotherPage = () => {
return (
<div className="container">
<center style={{ padding: '2em' }}>
<h3 style={{ fontWeight: 'normal' }}>You're landed on another page</h3>
<Button size="small" href="/">
View home page
</Button>
</center>
</div>
);
};
export default AnotherPage;
app/head.js 0 → 100644
export default function Head() {
return <title>Welcome to next.js app</title>;
}
app/layout.js 0 → 100644
import '@styles/global.scss';
export default function RootLayout({ children }) {
return (
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>{children}</body>
</html>
);
}
app/not-found.js 0 → 100644
import PageNotFound from '@components/page-not-found';
export default PageNotFound;
components/page-not-found/index.js
import React from 'react'; import Image from 'next/image';
import Button from '@components/button'; import Button from '@components/button';
import FourOhFour from './img/404.png';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
export default function PageNotFound() { export default function PageNotFound() {
return ( return (
<div className={styles.notFound}> <div className={styles.notFound}>
<img src={require('./img/404.png')} alt="" /> <Image src={FourOhFour} alt="404, Page Not Found!" />
<Button href="/">Back to Home</Button> <Button href="/">Back to Home</Button>
</div> </div>
); );
......
next.config.js
module.exports = { module.exports = {
experimental: { appDir: true },
images: {
domains: [''],
deviceSizes: [128, 384],
imageSizes: [640, 828, 1200, 1600, 1920, 2048]
},
webpack: (config, { isServer }) => { webpack: (config, { isServer }) => {
if (process.env.ANALYZE && !isServer) { if (process.env.ANALYZE && !isServer) {
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
...@@ -10,20 +16,8 @@ module.exports = { ...@@ -10,20 +16,8 @@ module.exports = {
}) })
); );
} }
config.module.rules.push({
test: /\.(png|svg|jpg|jpeg|gif|mp3|mp4)$/i,
// Next.js already handles url() in css/sass/scss files
issuer: /\.\w+(?<!(s?c|sa)ss)$/i,
type: 'asset/resource',
generator: {
filename: 'static/media/[name]-[hash:8][ext]'
}
});
return config; return config;
}, },
images: {
disableStaticImages: true
},
async rewrites() { async rewrites() {
return [ return [
{ {
......
package.json
...@@ -12,33 +12,32 @@ ...@@ -12,33 +12,32 @@
}, },
"dependencies": { "dependencies": {
"classnames": "^2.3.2", "classnames": "^2.3.2",
"css-loader": "^6.7.1", "css-loader": "^6.7.2",
"next": "13.0.0", "next": "^13.0.6",
"next-images": "^1.8.4", "next-images": "^1.8.4",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"sass": "^1.55.0", "sass": "^1.56.1",
"sass-loader": "^13.1.0", "sass-loader": "^13.2.0",
"sharp": "^0.31.1", "sharp": "^0.31.2",
"style-loader": "^3.3.1" "style-loader": "^3.3.1"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.1.2", "@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.1.0", "@commitlint/config-conventional": "^17.3.0",
"@storybook/addon-essentials": "^6.5.13", "@storybook/addon-essentials": "^6.5.14",
"@storybook/addon-links": "^6.5.13", "@storybook/addon-links": "^6.5.14",
"@storybook/builder-webpack5": "^6.5.13", "@storybook/builder-webpack5": "^6.5.14",
"@storybook/manager-webpack5": "^6.5.13", "@storybook/manager-webpack5": "^6.5.14",
"@storybook/preset-scss": "^1.0.3", "@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.5.13", "@storybook/react": "^6.5.14",
"babel-loader": "^8.2.5", "babel-loader": "^9.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"husky": "^8.0.1", "husky": "^8.0.2",
"prettier": "^2.7.1", "prettier": "^2.8.0",
"pretty-quick": "^3.1.3", "pretty-quick": "^3.1.3",
"webpack-bundle-analyzer": "^4.7.0", "webpack-bundle-analyzer": "^4.7.0"
"yarn": "^1.22.19"
} }
} }
pages/index.js deleted 100644 → 0
import Head from 'next/head';
import Image from 'next/image';
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<center style={{ padding: '2em' }}>
<Image
src={require('../public/img/nextjs.png')}
width="200"
height="120"
alt=""
/>
<h3 style={{ fontWeight: 'normal' }}>Welcome to Next.js App</h3>
</center>
</div>
);
}
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment